ant design react form表单如何监听setFieldsValue

前言

antd封装的很好 一般表单已经不需要我们去设定state和onChange来手动双向绑定了

利用FormInstance.setFieldsValue()和FormInstance.getFiedldsValue()即可很方便的实现数据存取

本文在不使用额外的状态(state)情况下监听setFieldsValue导致表单数据的变化.

ant design的文档：

我们监听setFieldsValue需要改写一下FormInstance实例上的函数

import React, { useEffect, useMemo, forwardRef, useImperativeHandle } from 'react'
import { Form, Input } from 'antd'

export default forwardRef(function Form1(props, ref) {
  const [form] = Form.useForm()
  useImperativeHandle(ref, () => ({
    form
  }))

  
  //改写setFiedldsValue
  useEffect(() => {
    const e = form.setFieldsValue
    const setFieldsValue = (vals, cb) => {
      e(vals)
      cb && cb(vals)
    }
    form.setFieldsValue = setFieldsValue
  }, [])

  useEffect(() => {
    setTimeout(() => {
      form?.setFieldsValue({
        name: "田所浩二"
      }, (vals) => {
        //监听setFieldsValue
        console.log(vals)
      })
    }, 1000)
  }, [])

  return (
    <Form form={form}>
      <Form.Item label="name" name="name" rules={[{required: true, message: '名字必填'}]}>
        <Input/>
      </Form.Item>
      <Form.Item label="age" name="age" rules={[{required: true, message: '年龄必填'}]}>
        <Input/>
      </Form.Item>
    </Form>
  )
})