Example form with useFormik

Simple signup form dùng formik

import React from 'react';

2 import { useFormik } from 'formik';

4 const SignupForm = () => {

5 // Pass the useFormik() hook initial form values and a submit function that will

6 // be called when the form is submitted

7 const formik = useFormik({

8 initialValues: {

name: '',

9 email: '',

10 },

11 onSubmit: values => console.log(values),

14 });

15 return (

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 />

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 (

CtrlP

) instead.