ReactAntDesignform.resetFields()不呼叫<Form.Items>的onChange事件

我有一個 Ant Design<Form>組件，<Form.Items>它有 onChange 事件。如果 onChange 事件函式為真，我將顯示額外的內容。因此，在我創建的示例沙箱中，當將所有 the 更改<Radio>為 Yes 時，它會觸發經過驗證的 onChange 事件，然后顯示一個帶有文本“您已檢查所有回答為是”的 div。由于我使用的<Form>是表單控制環境，因此我使用它form來設定和重置值。但是在呼叫form.resetFields()onChange 處理程式時不會呼叫。所以訊息不會消失，因為狀態不會重繪 。所以我必須找到一種方法來從父組件呼叫一個函式來重繪 子組件中的表單值。使用useImperativeHandle()對于每個欄位更新更復雜的表單以從父級呼叫函式對于這樣一個簡單的任務來說似乎太復雜了。在閱讀這個堆疊溢位執行緒時，添加自定義事件以與父組件通信似乎不是一種非常反應的方式 是否有我遺漏的 Ant Design 表單中的某些內容？因為這必須是一項共同的任務。解決這個問題的好方法是什么？

使用示例鏈接到代碼沙箱：

https://codesandbox.io/s/vigilant-curran-dqvlc?file=/src/AntDFormChild.js

例子

const formLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 7 }
};

const questionDefaultValues = {
  rjr01_q01: 2,
  rjr02_q01: 2
};

const AntDForm = () => {
  const [form] = Form.useForm();

  const handleResetForm = () => {
    form.resetFields();
    // now force onChange of child component to update
  };

  const handleFillForm = () => {
    form.setFieldsValue({ rjr01_q01: 1, rjr02_q01: 1 });
    // now force onChange of child component to update
  };

  return (
    <>
      <Button onClick={handleResetForm}>Reset Form</Button>
      <Button onClick={handleFillForm}>Fill Form</Button>
      <Form
        {...formLayout}
        form={form}
        initialValues={{ ...questionDefaultValues }}
      >
        <AntDFormChild form={form} />
      </Form>
    </>
  );
};

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

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

  useEffect(() => {
    if (shallowEqual(questionFormValues, questionQualifiedValues)) {
      setIsQualified(true);
    } else {
      setIsQualified(false);
    }
  }, [questionFormValues]);

  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;
  }

  return (
    <>
      {isQualified && (
        <div style={{ color: "red" }}>You checked all answered with yes</div>
      )}
      <Form.Item name="rjr01_q01" label="Question 1">
        <Radio.Group
          onChange={(i) => {
            setQuestionFormValues((questionFormValues) => ({
              ...questionFormValues,
              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) => {
            setQuestionFormValues((questionFormValues) => ({
              ...questionFormValues,
              rjr02_q01: i.target.value
            }));
          }}
        >
          <Radio value={1}>Yes</Radio>
          <Radio value={0}>No</Radio>
          <Radio value={2}>Unknown</Radio>
        </Radio.Group>
      </Form.Item>
    </>
  );
};

uj5u.com熱心網友回復：

由于 AntD Form 不受控制，因此無法onChange通過呼叫resetFields,來觸發事件setFieldsValues。我認為您的目標是根據表單值顯示訊息，最好的方法是使用Form.Item，它可以訪問表單狀態。

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

標籤：javascript 反应 蚂蚁

上一篇：反應無法讀取未定義的屬性（讀取“地圖”）

下一篇：訪問從Reactjs中的狀態創建的陣列的資料的問題