Ant 设计 React Form 在 form.resetFields() 上触发 onChange 事件

Question

I'm having an Ant Design <Form> component with multiple <Form.Items> . One of them is a <Select> which is dependents on multiple other <Form.Item> states to change the <Options> styling depending on the combination of chosen values in the other <Form.Items> . I'm working with an extra useState object ( activeQuestions ) to make more complex combinations easier to handle. My issue is when the form is being reset by form.resetFormFields() or set by form.setFieldsValue() it won't call my used onChange events as antd form is an uncontrolled form. So I'm not sure how to approach this. There is shouldUpdate on <Form.Items> but I'm not sure how and if this is the right approach for this goal.

So in the simplified example sandbox, I created, when changing all the the <Radio> to Yes it fires the onChange event which is validated, and then greying out some of the selection options.

Is there something from the Ant Design form I'm missing? Because this must be a common task. What's a good way to approach this problem?

Link to code sandbox with an example:

https://codesandbox.io/s/antd-form-item-based-on-other-item-forked-zofnj?file=/src/AntDFormChild.js

What I've tried (this causes an infinite loop)

 <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => {
          console.log(prevValues.rjr01_q01, currentValues.rjr01_q01);
          return (
            prevValues.rjr01_q01 !== currentValues.rjr01_q01 &&
            prevValues.rjr02_q01 !== currentValues.rjr02_q01
          );
        }}
      >
        {({ getFieldValue }) => {
          setSelections((selections) => ({
            rjr01_q01: getFieldValue("rjr01_q01"),
            rjr02_q01: getFieldValue("rjr02_q01")
          }));

          return null;
        }}
      </Form.Item>

Example

import React, { useState, useEffect } from "react";
import { Descriptions, Form, Radio, Select, Typography } from "antd";

const { Text } = Typography;
const { Option } = Select;

const questionsData = {
  rjr01_q01: { title: "Question 1", description: "Question 1 description" },
  rjr02_q01: { title: "Question 2", description: "Question 2 description" }
};

const AntDFormChild = ({ form }) => {
  const [selections, setSelections] = useState({
    rjr01_q01: null,
    rjr02_q01: null
  });
  const [activeQuestions, setActiveQuestions] = useState([]);

  useEffect(() => {
    console.log("selections state update", selections);
    // if question 1 is yes
    if (selections.rjr01_q01 === 1 && !activeQuestions.includes("rjr01_q01")) {
      setActiveQuestions((activeQuestions) => [
        ...activeQuestions,
        "rjr01_q01"
      ]);
    }
    // if question 1 is not yes
    if (selections.rjr01_q01 !== 1 && activeQuestions.includes("rjr01_q01")) {
      setActiveQuestions((activeQuestions) => [
        ...activeQuestions.filter((i) => i !== "rjr01_q01")
      ]);
    }

    // if question 2 is yes
    if (selections.rjr02_q01 === 1 && !activeQuestions.includes("rjr02_q01")) {
      setActiveQuestions((activeQuestions) => [
        ...activeQuestions,
        "rjr02_q01"
      ]);
    }
    // if question 2 is not yes
    if (selections.rjr02_q01 !== 1 && activeQuestions.includes("rjr02_q01")) {
      setActiveQuestions((activeQuestions) => [
        ...activeQuestions.filter((i) => i !== "rjr02_q01")
      ]);
    }
  }, [selections]);

  useEffect(() => {
    console.log("activeQuestions state update", activeQuestions);
  }, [activeQuestions]);

  return (
    <>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => {
          console.log(prevValues.rjr01_q01, currentValues.rjr01_q01);
          return (
            prevValues.rjr01_q01 !== currentValues.rjr01_q01 &&
            prevValues.rjr02_q01 !== currentValues.rjr02_q01
          );
        }}
      >
        {({ getFieldValue }) =>
          getFieldValue("rjr01_q01") === 1 &&
          getFieldValue("rjr02_q01") === 1 ? (
            <div style={{ color: "red" }}>
              You checked all answered with yes
            </div>
          ) : null
        }
      </Form.Item>
      <Form.Item name="rjr01_q01" label="Question 1">
        <Radio.Group
          onChange={(i) => {
            setSelections((selections) => ({
              ...selections,
              rjr01_q01: i.target.value
            }));
          }}
        >
          <Radio value={1}>Yes</Radio>
          <Radio value={0}>No</Radio>
          <Radio value={2}>Unknown</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item name="rjr02_q01" label="Question 2">
        <Radio.Group
          onChange={(i) => {
            setSelections((selections) => ({
              ...selections,
              rjr02_q01: i.target.value
            }));
          }}
        >
          <Radio value={1}>Yes</Radio>
          <Radio value={0}>No</Radio>
          <Radio value={2}>Unknown</Radio>
        </Radio.Group>
      </Form.Item>

      <Form.Item name="availableQuestions" label="Available Questions">
        <Select allowClear style={{ width: 250 }}>
          {Object.keys(questionsData).map((key, index) => (
            <Option key={key} value={key}>
              <Text
                style={{
                  color: activeQuestions.includes(key) && "lightgrey"
                }}
              >
                {questionsData[key].title}
              </Text>
            </Option>
          ))}
        </Select>
      </Form.Item>
    </>
  );
};

export default AntDFormChild;

Answer 1

You can lift your activeQuestions state to the AntDForm component and reset it together with the form:

const AntDForm = () => {
  const [form] = Form.useForm();
  const [activeQuestions, setActiveQuestions] = useState([]);

  const handleResetForm = () => {
    form.resetFields();
    // now force onChange of child component to update
    // Reset active questions
    setActiveQuestions([]);
  };
 
...

Then pass it to AntDFormChild :

      <AntDFormChild
          form={form}
          activeQuestions={activeQuestions}
          setActiveQuestions={setActiveQuestions}
        />
      </Form>

And in <AntDFormChild> make them props instead of its own state:

const AntDFormChild = ({ form, activeQuestions, setActiveQuestions }) => {

Here's a sandbox link showing how it works.