ถ้าพูดถึงการจัดการฟอร์มใน React หรือ Next.js หลายคนคงเคยเจอปัญหาปวดหัวกับการจัดการ state, validation, และการ submit ข้อมูลกันใช่ไหม? วันนี้เราจะมาทำความรู้จักกับ React Hook Form ซึ่งเป็นหนึ่งในไลบรารีจัดการฟอร์มที่ดีที่สุดสำหรับ React และ Next.js ทำให้ชีวิตนักพัฒนาง่ายขึ้นเยอะ!
ทำไมต้องใช้ React Hook Form?
โดยปกติ ถ้าเราจัดการฟอร์มใน React ด้วย useState() เราจะต้องสร้าง state แยกกันตามฟิลด์ของฟอร์ม เช่น
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
แล้วทุกครั้งที่มีการเปลี่ยนค่าฟิลด์ เราต้องใช้ onChange มาจับข้อมูลอีก
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
มันใช้ได้ก็จริง แต่มันเยอะและยุ่งยาก!
React Hook Form (RHF) ช่วยลดความยุ่งยากนี้ ด้วยการทำให้ฟอร์มเป็นแบบ uncontrolled ซึ่งหมายความว่า ไม่ต้องใช้ useState() คุมค่าฟิลด์แบบ manual แต่ให้ React ทำงานร่วมกับ DOM โดยตรง
ติดตั้ง React Hook Form
ก่อนอื่น ต้องติดตั้ง React Hook Form ก่อน
npm install react-hook-form
หรือถ้าใช้ Yarn
yarn add react-hook-form
ใช้ React Hook Form ใน Next.js
มาดูโค้ดตัวอย่างง่ายๆ ของการใช้งาน React Hook Form ใน Next.js
สร้างฟอร์มแบบง่าย
import { useForm } from 'react-hook-form';
export default function MyForm() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('name')} placeholder="ชื่อ" />
<input {...register('email')} type="email" placeholder="อีเมล" />
<button type="submit">ส่ง</button>
</form>
);
}
อธิบายโค้ด:
- useForm() คือฟังก์ชันหลักที่ใช้ดึง API ต่างๆ
- register() ใช้สำหรับเชื่อมโยงอินพุตฟอร์มกับ React Hook Form
- handleSubmit(onSubmit) ใช้จัดการการส่งฟอร์ม
- data ที่ได้จาก onSubmit() จะเป็นอ็อบเจ็กต์ที่รวมค่าทั้งหมดในฟอร์ม
การเพิ่ม Validation
ถ้าไม่อยากให้ผู้ใช้กรอกมั่วๆ ก็ต้องเพิ่ม Validation Rules เข้าไป โดยใช้ register()
import { useForm } from 'react-hook-form';
export default function MyForm() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('name', { required: 'ต้องกรอกชื่อ' })} placeholder="ชื่อ" />
{errors.name && <p>{errors.name.message}</p>}
<input {...register('email', { required: 'ต้องกรอกอีเมล', pattern: { value: /\S+@\S+\.\S+/, message: 'รูปแบบอีเมลไม่ถูกต้อง' } })} placeholder="อีเมล" />
{errors.email && <p>{errors.email.message}</p>}
<button type="submit">ส่ง</button>
</form>
);
}
สิ่งที่เพิ่มเข้ามา:
- ใช้ errors เพื่อตรวจจับข้อผิดพลาดในแต่ละฟิลด์
- ถ้ามี error จะแสดงข้อความแจ้งเตือนใต้ input
การใช้ Default Values
บางครั้งเราอาจต้องกำหนดค่าตั้งต้นให้ฟอร์ม เช่น กรณีแก้ไขข้อมูลผู้ใช้
const { register, handleSubmit } = useForm({
defaultValues: {
name: 'John Doe',
email: 'john@example.com',
},
});
ใช้ Controller กับ React Hook Form
ถ้าเราต้องใช้ React Component ของบุคคลที่สาม (เช่น React Select หรือ DatePicker) ที่ไม่รองรับ register() โดยตรง เราต้องใช้ Controller
import { useForm, Controller } from 'react-hook-form';
import Select from 'react-select';
export default function MyForm() {
const { control, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="gender"
control={control}
render={({ field }) => <Select {...field} options={[{ label: 'ชาย', value: 'male' }, { label: 'หญิง', value: 'female' }]} />}
/>
<button type="submit">ส่ง</button>
</form>
);
}
ใช้งานร่วมกับ Next.js API Routes
ถ้าเราต้องการส่งข้อมูลไปที่ API ใน Next.js สามารถทำแบบนี้
const onSubmit = async (data) => {
const response = await fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
const result = await response.json();
console.log(result);
};
ฝั่ง API Route (/pages/api/submit.js)
export default function handler(req, res) {
if (req.method === 'POST') {
res.status(200).json({ message: 'ฟอร์มถูกส่งแล้ว!', data: req.body });
} else {
res.status(405).json({ message: 'Method Not Allowed' });
}
}
สรุป
React Hook Form เป็นตัวช่วยที่ทำให้การจัดการฟอร์มใน Next.js ง่ายขึ้น ลดโค้ดที่ต้องเขียน และรองรับ validation แบบ built-in
- ใช้งานง่าย – ใช้ register() เชื่อมโยงฟิลด์ได้เลย
- ไม่ต้องใช้ useState() แยกฟิลด์ – ประหยัดโค้ด
- รองรับ validation ในตัว – กำหนดเงื่อนไขได้ง่าย
- ทำงานเร็วกว่าโซลูชันอื่นๆ เช่น Formik
ถ้าคุณต้องการจัดการฟอร์มใน Next.js React Hook Form คือคำตอบ!
