问题
最近遇到一个小的需求,当用户讲一个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;