接上文，在使用antd的時(shí)候遇到的表單問題，使用formik可以避免。

1. antd form 當(dāng)我們 setFieldsValue 的時(shí)候，不會(huì)觸發(fā)表單元素自己的 onChange 以及 Form 的 onValuesChange 和 onFieldsChange 方法，而且即使我們使用下面的方法，我們也無法獲取到最新的 form 表單的 values，只能使用我之前提到過的 diapatch updateValue 去手動(dòng)觸發(fā)更新

useEffect(() => {
    console.log(form.getFieldsValue(true));
  }, [form.getFieldsValue(true)]);

但是 Formik，卻可以通過監(jiān)聽 formik.values 來實(shí)時(shí)獲取最新的 form 值

 useEffect(() => {
    console.log(formik.values);
  }, [formik.values]);

可以實(shí)時(shí)獲取到表單 values 的變化

2. antd form 在 setFieldsValue 執(zhí)行之后不會(huì)觸發(fā) form 表單的驗(yàn)證

formik 的 formik.setFieldValue('lastName', '233333333333333333333333333'); 可以觸發(fā)驗(yàn)證

3. antd form 可以支持 Form.Item 的 name 是一個(gè)數(shù)組，然后以對(duì)象的形式收集值

      <Form.Item name={['user', 'name']} label="Name" rules={[{ required: true }]}>
        <Input />
      </Form.Item>

最后這個(gè) form 的值以下面這種形式存儲(chǔ)

{
    user:{
        name: '你輸入的值'
    }
}

formik 也支持嵌套對(duì)象和數(shù)組

      <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 字段，用于在某個(gè)字段依賴的字段的 value 值變化的時(shí)候重新對(duì)該字段進(jìn)行校驗(yàn)；在 formik 中這種依賴關(guān)系通過 useEffect 來實(shí)現(xiàn)

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 調(diào)用 setFieldsvalue 不生效

在 formik 中我們可以直接使用 useEffect 來監(jiān)聽某一個(gè)字段值的變化，進(jìn)行一些操作

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