React Ant Design Form调用resetFields()未触发Form.Item的onChange事件问询

问题根因 #

• Ant Design Form 的 resetFields()、setFieldsValue() 等实例API是直接修改表单内部托管的状态，设计上不会触发表单项上绑定的 onChange 事件，你本地单独维护的 questionFormValues 状态没有和表单内部状态同步，就会出现更新不及时的问题。

最佳实践方案 #

方案1：使用 Form.useWatch 监听字段值（推荐，适配 AntD v4.20.0+ / v5） #

直接用Form官方提供的字段监听能力，不需要自己维护表单值状态、不需要绑定onChange事件，不管是用户交互还是API修改的表单值都能实时获取：

const questionQualifiedValues = {
  rjr01_q01: 1,
  rjr02_q01: 1
};

const AntDFormChild = ({ form }) => {
  // 直接监听对应字段的最新值
  const q1Value = Form.useWatch('rjr01_q01', form);
  const q2Value = Form.useWatch('rjr02_q01', form);
  // 直接计算是否符合条件，不需要额外的状态和useEffect
  const isQualified = q1Value === 1 && q2Value === 1;

  return (
    <>
      {isQualified && (
        <div style={{ color: "red" }}>你所有问题都选了是</div>
      )}
      <Form.Item name="rjr01_q01" label="问题1">
        <Radio.Group>
          <Radio value={1}>是</Radio>
          <Radio value={0}>否</Radio>
          <Radio value={2}>未知</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item name="rjr02_q01" label="问题2">
        <Radio.Group>
          <Radio value={1}>是</Radio>
          <Radio value={0}>否</Radio>
          <Radio value={2}>未知</Radio>
        </Radio.Group>
      </Form.Item>
    </>
  );
};

方案2：订阅表单全局值变化（适配旧版本AntD） #

如果用的是更低版本的AntD不支持useWatch，可以通过form实例的onValuesChange方法订阅所有值变化，同步到本地状态：

const AntDFormChild = ({ form }) => {
  const [questionFormValues, setQuestionFormValues] = useState({});
  const [isQualified, setIsQualified] = useState(false);

  // 浅比较方法
  function shallowEqual(object1, object2) {
    const keys1 = Object.keys(object1);
    const keys2 = Object.keys(object2);
    if (keys1.length !== keys2.length) {
      return false;
    }
    for (let key of keys1) {
      if (object1[key] !== object2[key]) {
        return false;
      }
    }
    return true;
  }

  // 订阅表单所有值的变化，不管是用户交互还是API修改都会触发
  useEffect(() => {
    const unsubscribe = form.onValuesChange((allValues) => {
      setQuestionFormValues(allValues);
    });
    // 组件卸载时取消订阅
    return () => unsubscribe();
  }, [form]);

  useEffect(() => {
    setIsQualified(shallowEqual(questionFormValues, questionQualifiedValues));
  }, [questionFormValues]);

  // 其余渲染逻辑不变，Radio上的自定义onChange可以直接删除
  // ...
};

优化建议 #

• 不要重复维护和表单内部状态一致的本地状态，尽量直接使用Form实例托管的值，避免出现多状态不同步的问题
• 复杂表单的联动逻辑优先用AntD Form自带的dependencies、useWatch、onValuesChange等能力实现，不需要额外的父子通信方案

内容的提问来源于stack exchange，提问作者BenjaminK