使用 Formik 可以解决的 antd Form 的问题

接上文，在使用antd的时候遇到的表单问题，使用formik可以避免。

1. 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 的变化

2. antd form 在 setFieldsValue 执行之后不会触发 form 表单的验证

formik 的 formik.setFieldValue('lastName', '233333333333333333333333333'); 可以触发验证

3. 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"
    ]
}

4. 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

5. antd 在 onChange 调用 setFieldsvalue 不生效

在 formik 中我们可以直接使用 useEffect 来监听某一个字段值的变化，进行一些操作

useEffect(()=> {
    // do something
}, [values.name])