antd form通过字段控制另字段是否为必填

问题

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

解决方案

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

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

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

具体实现的代码

1.  
   const App = () => {
2.  
   //通过是否开启Switch来控制是否禁用InputNumber
3.  
   const [openInputNumber, setOpenInputNumber] = useState(false);
4.  
   const [form] = Form.useForm();
5.  
    
6.  
   //只要Switch变换就去校验对应的字段
7.  
   const handleSwitchClick = () => {
8.  
   form.validateFields(["InputNumber"]);
9.  
   };
10.  
     
11.  
    return (
12.  
    <Form form={form}>
13.  
    <Form.Item label="isOpenInputNumber" name="openInputNumber">
14.  
    <Switch
15.  
    valuePropName={true}
16.  
    onChange={setOpenInputNumber}
17.  
    onClick={handleSwitchClick}
18.  
    />
19.  
    </Form.Item>
20.  
     
21.  
    <Form.Item
22.  
    label="InputNumber"
23.  
    name="InputNumber"
24.  
    rules={[
25.  
    {
26.  
    //是否必填取决于是否开启Switch
27.  
    required: openInputNumber,
28.  
    message: "This field is required"
29.  
    }
30.  
    ]}
31.  
    >
32.  
    <InputNumber disabled={!openInputNumber} />
33.  
    </Form.Item>
34.  
    </Form>
35.  
    );
36.  
    };
37.  
     
38.  
    export default App;

最终效果图如下

这篇好文章是转载于：学新通技术网