5// Pass the useFormik() hook initial form values and a submit function that will
6// be called when the form is submitted
7const formik = useFormik({
8 initialValues: {
name: '',
9 email: '',
10 },
11onSubmit: values => console.log(values),
14 });
15return (
16 <form onSubmit={formik.handleSubmit}>
17 <label htmlFor="name">Name</label>
18 <input
19 id="name"
20 name="name"
21 type="name"
22 onChange={formik.handleChange}
23 value={formik.values.name}
24/>
<label htmlFor="email">Email Address</label>
18 <input
19 id="email"
20 name="email"
21 type="email"
22 onChange={formik.handleChange}
23 value={formik.values.email}
24/>
25
26 <button type="submit">Submit</button>
27 </form>
28 );
29 };
Trong đó :
initialValues: giá trị khởi tạo
handleSubmit: A submission handler
handleChange: A change handler to pass to each <input>, <select>, or <textarea> dựa vào name của attribute đó.
values: Our form’s current values
*
Dùng function handleChange, handleBlur, ... của formik cho các thành phần trong form
Khi sử dụng formik thì cần chú ý đã có các method xử lý như handleChange, handleBlur,....
(They dont manually create a function like you did.
setState and reference a passed prop is unsafe as the passed prop might not updated when the setState is fired. => use setState(prevValue => !prevValue) to toggle state.)
Trong form khi dùng với formik thì các thành phần sẽ dựa vào id và name các HTML attribute sẽ matches đúng với property trong initialValues
Get values của HTML attribute sẽ dựa vào name của attribute đó (ví dụ email: formik.values.email)
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (