antd form如何通过一个字段控制另一个字段是否为必填

问题

        最近遇到一个小的需求，当用户讲一个Switch的按钮选择为yes的时候，对应的一个InputNumber组件就要为必填，同时还要检验InputNumber是否填写了数据，如果Switch为No，则对应的InputNumber组件要禁用。

解决方案

        创建一个isOpenInputNumber的state来控制InputNumber是否禁用，这个isOpenInputNumber的值由Switch的值来决定

        当我们点击Switch的值时，就去修改isOpenInputNumber的状态，这样InputNumber组件就能根据Switch的值变化而变化。

        当Switch的值改变时，我们就去校验对应的InputNumber，这样也能动态校验了。

具体实现的代码

const App = () => {
  //通过是否开启Switch来控制是否禁用InputNumber
  const [openInputNumber, setOpenInputNumber] = useState(false);
  const [form] = Form.useForm();

  //只要Switch变换就去校验对应的字段
  const handleSwitchClick = () => {
    form.validateFields(["InputNumber"]);
  };

  return (
    <Form form={form}>
      <Form.Item label="isOpenInputNumber" name="openInputNumber">
        <Switch
          valuePropName={true}
          onChange={setOpenInputNumber}
          onClick={handleSwitchClick}
        />
      </Form.Item>

      <Form.Item
        label="InputNumber"
        name="InputNumber"
        rules={[
          {
            //是否必填取决于是否开启Switch
            required: openInputNumber,
            message: "This field is required"
          }
        ]}
      >
        <InputNumber disabled={!openInputNumber} />
      </Form.Item>
    </Form>
  );
};

export default App;

最终效果图如下