一、Antd3
在antd3中可以使用getFieldDecorator去控制表单的显示和隐藏
import { Form, Select } from 'antd';
const { getFieldDecorator, setFieldsValue } = form;
{getFieldDecorator('bizCode')&&(<p>xxxx</p>) }
但是在antd4中做了修改,如下
二、Antd4
1. 首先声明form,并且挂载在form元素上
const [form] = Form.useForm();
2. 根据a值控制b筛选条件是否显示
需要用form.Item包裹起来,判断条件a的值是否等于1,如果等于就显示
<Form.Item
noStyle
>
{(getFieldValue('a')==='1' && (
<Col span={4}>
<Form.Item label="时间" name="b">
<DatePicker
showTime={{ format: 'YYYY-MM-DD HH:mm:ss' }}
format="YYYY-MM-DD HH:mm:ss"
/>
</Form.Item>
</Col>
)
);
}
</Form.Item>
优化
优化的原因是减少资源消耗,会在shouldUpdate的时候就开始对我们需要匹配的字段进行判断,这样是比较好的输出写法:
<Form.Item
noStyle
shouldUpdate={(pre: a, cur: a) =>
pre.a !== cur.a
}
>
{({ getFieldValue }) => {
getFieldValue('a') === '1' && (
<Col span={4}>
<Form.Item label="时间" name="b">
<DatePicker
showTime={{ format: 'YYYY-MM-DD HH:mm:ss' }}
format="YYYY-MM-DD HH:mm:ss"
/>
</Form.Item>
</Col>
)
}
</Form.Item>