Antd4之动态增删表单

一、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>