PJCHENder 未整理筆記

[React] Formik 筆記

2019-06-03

[React] Formik 筆記

關於那些小細節 Tips

  • Formik 會使用 <input> 欄位中的 name 屬性來決定該 value 要保存在哪個內部的 key 中。
  • Formik 中包括 values, errors, touched 物件,裡面的 key 都會和 <input>name 對應。
  • Formik 在使用 radio button 時,當帶入的 value 是「數值」需特別留意,因為存在 field 的值會是「數值」,但存入 Formik 的 meta 中會變成「字串」,這會導致 Formik 沒辦法匹配正確,進而使得該 input 沒辦法被勾選(checked),但在 Formik 中又會設值的情況(參考這個 Gist)。

useFormik

基本使用

使用 Formik 中的 values 物件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { useFormik } from 'formik';

const SignupForm = () => {
// STEP 1: useFormik
const formik = useFormik({
// STEP 2-1:建立初始值
initialValues: { email: '' },
// STEP 2-2:在 onSubmit 時透過 `values` 物件取得表單中的內容
onSubmit: values => {
console.log(JSON.stringify(values, null, 2));
},
});

return (
// STEP 3: 在 onSubmit 事件中帶入 `formik.handleSubmit`
<form onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="email">Email Address</label>
{/* STEP 4-1:建立 input 欄位,formik 會用 input 的 name 來作為內部的 key */}
<input id="email" name="email" type="email"
{/* STEP 4-2: invoke `formik.handleChange` when input onchange */}
onChange={formik.handleChange}

{/* STEP 4-3: 使用 values 物件取回該欄位的值 */}
value={formik.values.email}
/>
</div>
<button type="submit">Submit</button>
</form>
);
};

表單驗證:手動處理(validate)

使用 Formik 中的 errors 物件,並搭配 validate 屬性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// STEP 1:建立 validate
const validate = values => {
const errors = {};

if (!values.firstName) {
errors.firstName = 'Required first name';
} else if (values.firstName.length > 15) {
errors.firstName = 'Must be 15 characters or less';
}

return errors;
};

const SignupForm = () => {
const formik = useFormik({
initialValues: { email: '' },
// STEP 2:放入 validate 函式
validate,
onSubmit: values => {
console.log(JSON.stringify(values, null, 2));
},
});

return (
<form onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="email">Email Address</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
value={formik.values.email}
/>
{/* STEP 3: 有錯誤時顯示錯誤 */}
{formik.errors.email ? <div>{formik.errors.email}</div> : null}
</div>

<button type="submit">Submit</button>
</form>
);
};
  • 預設的情況下,在每一次 onChange 及 onSubmit 時,Formik 都會促發 validate 函式(如果有給的話),只有在 errors 為空物件時,才會真的把表單送出。

表單驗證:搭配 Yup(validationSchema)

在 Formik 中除了 validate 可以手動驗證表的欄外之外,額外提供 validationSchema 可以搭配 Yup 來做欄位的資料驗證:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React from 'react';
import { useFormik } from 'formik';

// STEP 1:匯入 Yup
import * as Yup from 'yup';

const SignupForm = () => {
const formik = useFormik({
initialValues: { email: '' },

// STEP 2:搭配 Yup 使用 validationSchema
validationSchema: Yup.object({
firstName: Yup.string()
.max(15, '至少要超過 15 個字')
.required('firstName 為必填'),
email: Yup.string()
.email('無效的 Email')
.required('email 為必填'),
}),
onSubmit: values => {
console.log(JSON.stringify(values, null, 2));
},
});

return (
<form onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="email">Email Address</label>
<input id="email" name="email" type="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.email}
/>
{formik.touched.email && formik.errors.email ? (
<div>{formik.errors.email}</div>
) : null}
</div>

<button type="submit">Submit</button>
</form>
);
};

檢驗表單是否碰過

使用 Formik 中的 touched 物件,搭配在 input 欄位上的 onBlur 事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const SignupForm = () => {
const formik = useFormik({/* ... */});

return (
<form onSubmit={formik.handleSubmit}>

<div>
<label htmlFor="email">Email Address</label>
<input id="email" name="email" type="email"
onChange={formik.handleChange}
value={formik.values.email}

// STEP 1: 使用 onBlur 搭配 formik.handleBlur
onBlur={formik.handleBlur}
/>

{/* STEP 2: 取得 touched 物件的值 */}
{formik.touched.firstName && formik.errors.firstName ? (
<div>{formik.errors.firstName}</div>
) : null}
</div>
<button type="submit">Submit</button>
</form>
);
};

簡化程式碼 - getFieldProps()

在上面的範例中可看到需要自己在 <input> 中寫 onChange, onBlur, value 等等,formik 提供一個名為 getFiledProps 的 helper 可以簡化這些程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const SignupForm = () => {
const formik = useFormik({
/* ... */
});

return (
<form onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="email">Email Address</label>

{/**
* STEP 1:使用 `formik.getFieldProps()` 可以省去要自己註冊事件的時間
**/}
<input name="email" {...formik.getFieldProps('email')} />
{formik.touched.email && formik.errors.email ? (
<div>{formik.errors.email}</div>
) : null}
</div>

<button type="submit">Submit</button>
</form>
);
};

使用 Formik 元件,進一步簡化程式碼

在 Formik 中進一步提供 <Formik> 這個元件來簡化表單的程式架構,它利用了 React Context API 來實作,使用 <Formik /> 元件後,內部可以在使用 <Form />, <Field /><ErrorMessage />

先將 useFormik 改成用 Formik

Imgur

進一步搭配 <Form>, <Field>, ErrorMessage,程式碼變得更簡潔:

Imgur

API

Formik

<Formik /> @ Formik API

<Formik /> 中上可用屬性和對應的 helper 可參考 API 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* demo use for array of objects with formik */
import React from 'react';
import { Formik, Field, Form } from 'formik';

const Invitation = () => (
<div>
<Formik
initialValues={initialValues}
onSubmit={(values) => { /* values to submit ... */ }}
validationSchema={{
/* validation rules here */
}}
>
{(formik) => (
<FormikFormComponent />
)}
</Formik>
</div>
);

export default Invitation;

Form and Field

<Field /> @ Formik API Docs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<Form className="col s-12">

{/* 添加 label */}
<label htmlFor="firstName">First Name</label>
<Field name="firstName" placeholder="Jane" />

{/* children 可以是 function:如果需要自己控制 input */}
<Field name="user.name" type="text">
{({ field, form, meta }) => (
<input {...field} type="text" placeholder="Jane Doe" />
)}
</Field>

{/* children 也可以是 JSX */}
<Field name="color" as="select" placeholder="Favorite Color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</Field>

<Field
name="user.email"
type="email"
placeholder="jane@example.com"
/>
</Form>;

FieldArray

keywords: push, remove

從原本的 <Form> 改成帶有 <FieldArray> 的 form。

如果資料是 array of objects 可以使用 <FieldArray>,它會多了 pushremove 的方法,方便我們進行資料的新增和刪除:

1
2
3
4
5
<Form>
<FieldArray name="friends">
{({ push, remove }) => <FormikFormComponent />}
</FieldArray>
</Form>

假設原本的資料是這樣,需要使用 friends[0] 才可以取到值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const values = {
friends: [{ name: '', email: '' }],
};

const Form = () => (
<Form>
{/* ... */}
<Field
name="friends[0].email"
type="email"
placeholder="jane@example.com"
/>
{/* ... */}
</Form>
);

如果資料是 Array of Objects 的話,可以使用 map 搭配 pushremove 即可達到新增刪除陣列元素的效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<Formik initialValues={initialValues} onSubmit={(values) => {}}>
{({ values, isSubmitting }) => (
<React.Fragment>
<Form className="col s-12">
<FieldArray name="friends">
{({ push, remove }) => (
<React.Fragment>
{values.friends &&
values.friends.length > 0 &&
values.friends.map((value, index) => (
<React.Fragment>
<Field
name={`friends[${index}].name`}
type="text"
placeholder="Jane Doe"
/>

<Field
name={`friends[${index}].email`}
type="email"
placeholder="jane@example.com"
/>

{/* 使用 remove 移除陣列內的元素 */}
<button type="button" onClick={() => remove(index)}>
X
</button>
</React.Fragment>
))}
{/* 使用 push 添加陣列內的元ㄓㄨ */}
<button
type="button"
onClick={() => push({ name: '', email: '' })}
>
Add Friend
</button>
</React.Fragment>
)}
</FieldArray>
</Form>
</React.Fragment>
)}
</Formik>;

ErrorMessage

  • STEP 1: 在 <Formik /> 定義 validationSchema 屬性
  • STEP 2: 使用 ErrorMessage Component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

// STEP 1: 在 <Formik /> 定義 validationSchema 屬性
<Formik
initialValues={initialValues}
validationSchema={Yup.object({
friends: Yup.array().of(
Yup.object({
name: Yup.string().required('Required'),
email: Yup.string()
.email('Invalid Email')
.required('Required'),
})
),
})}
>
{({ values, isSubmitting }) => (
<Form className="col s-12">
<Field
name={`friends[${index}].name`}
type="email"
placeholder="Jane Doe"
/>
{/* STEP 2: 使用 ErrorMessage Component */}
<ErrorMessage name={`friends[${index}].name`}>
{(msg) => <span>{msg}</span>}
</ErrorMessage>
</Form>
)}
</Formik>;

Debug

先到官網下載 Debug Component 的原始碼,接著可以把它 import 近來使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 想要 debug formik 的地方
import React from 'react';
import { Formik, Field, Form } from 'formik';
import { Debug } from './Debug';

// ...
<Formik
initialValues={initialValues}
onSubmit={(values) => {}}
render={() => (
<Form>
<label htmlFor="firstName">First Name</label>
<Field name="firstName" placeholder="Jane" />

<button type="submit">Submit</button>

{/* ✨ put DEBUG COMPONENT in the form */}
<Debug />
</Form>
)}
/>;

useField

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React from 'react';
import { Formik, Form, useField } from 'formik';

// 定義自己的 input 欄位
function MyTextField(label, ...props) {
// 在 useField 的參數中可以帶入原本會放入 <Field /> 中的參數,例如 name, validate
// 會回傳 field, meta 和 helpers
const [field, meta, helpers] = useField(props.name);

return (
<React.Fragment>
<label htmlFor={props.id || props.name}>{label}</label>
<input {...field} {...props} />
{meta.error && meta.touched && <div>{meta.error}</div>}
</React.Fragment>
);
}

const Example = () => (
<Formik
initialValues={{
email: '',
firstName: 'red',
lastName: '',
}}
onSubmit={(values, actions) => {
console.log(JSON.stringify(values, null, 2));
}}
>
{props => (
<Form>
{/* 使用自定義的欄位 */}
<MyTextField name="firstName" type="text" label="First Name" />
<MyTextField name="lastName" type="text" label="Last Name" />
<MyTextField name="email" type="email" label="Email" />
<button type="submit">Submit</button>
</Form>
)}
</Formik>
);

field, meta, helpers 分別會得到:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
field: {
name: 'firstName',
value: '',
}

meta: {
value: '',
error: 'Required',
touched: true,
initialValue: '',
initialTouched: false,
initialError: undefined,
}

helpers: {
setValue,
setTouched,
setError,
}

Customization

setFieldValue

setFieldValue

1
setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void

Custom onChange with callback to Formik parent @ Github Issue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
class PersonalInfo extends React.Component {
constructor(props) {
this.handleCountryChange = this.handleCountryChange.bind(this);
}

// STEP 3: 在 onchange 的時候透過 setFieldValue 同步 formik 內的狀態
handleCountryChange(setFieldValue) {
return (e) => {
const countryId = e.target.value;
setFieldValue('country', countryId);

// 做些想要客製化的事情...
// this.fetchCityOptions({ countryId });
};
}

render() {
return (
<Formik
initialValues={{
country: '',
}}
onSubmit={(values) => {}}
// STEP 1: 取得 setFieldValue 方法可以用來更改 formik 內的狀態
render={({ setFieldValue }) => (
<Form>
<Field
css={inputSelect}
style={{ marginRight: 20 }}
component="select"
name="country"
placeholder="Country"
// STEP 2: 把 setFieldValue 的方法傳進去
onChange={this.handleCountryChange(setFieldValue)}
>
{countryOptions.map(({ id, name }) => (
<option key={id} value={id}>
{name}
</option>
))}
</Field>
</Form>
)}
/>
);
}
}

參考資源

Tags: react

掃描二維條碼,分享此文章