接上文，在使用antd的时候遇到的表单问题，使用formik可以避免。
- antd form 当我们 setFieldsValue 的时候，不会触发表单元素自己的 onChange 以及 Form 的 onValuesChange 和 onFieldsChange 方法，而且即使我们使用下面的方法，我们也无法获取到最新的 form 表单的 values，只能使用我之前提到过的 diapatch updateValue 去手动触发更新
useEffect(() => {
console.log(form.getFieldsValue(true));
}, [form.getFieldsValue(true)]);
但是 Formik，却可以通过监听 formik.values 来实时获取最新的 form 值
useEffect(() => {
console.log(formik.values);
}, [formik.values]);
可以实时获取到表单 values 的变化
- antd form 在 setFieldsValue 执行之后不会触发 form 表单的验证
formik 的 formik.setFieldValue('lastName', '233333333333333333333333333'); 可以触发验证
- antd form 可以支持 Form.Item 的 name 是一个数组，然后以对象的形式收集值
<Form.Item name={['user', 'name']} label="Name" rules={[{ required: true }]}>
<Input />
</Form.Item>
最后这个 form 的值以下面这种形式存储
{
user:{
name: '你输入的值'
}
}
formik 也支持嵌套对象和数组
<Form>
<Field name="social.facebook" />
<Field name="social.twitter" />
<button type="submit">Submit</button>
</Form>
{
"social": {
"facebook": "123",
"twitter": "456"
}
}
initialValues={{
friends: ['jared', 'ian'],
}}
<Form>
<Field name="friends[0]" />
<Field name="friends[1]" />
<button type="submit">Submit</button>
</Form>
{
"friends": [
"jared",
"ian"
]
}
- antd 的 FormItem 具有 dependencies 字段，用于在某个字段依赖的字段的 value 值变化的时候重新对该字段进行校验；在 formik 中这种依赖关系通过 useEffect 来实现
React.useEffect(() => {
// set the value of textC, based on textA and textB
if (
textA.trim() !== '' &&
textB.trim() !== '' &&
touched.textA &&
touched.textB
) {
setFieldValue('textC', `textA: ${textA}, textB: ${textB}`);
}
}, [textB, textA, touched.textA, touched.textB, setFieldValue]);
textC 的值依赖于 textA 和 textB
- antd 在 onChange 调用 setFieldsvalue 不生效
在 formik 中我们可以直接使用 useEffect 来监听某一个字段值的变化，进行一些操作
useEffect(()=> {
// do something
}, [values.name])
