antd自定义表单组件如何将数据绑定到form上

用过antd 的同学都应该知道，表单是可以通过form.getFieldsValue() 来获取表单内的属性和值的。那如果我们自定义了一个表单组件，如何来实现这个功能呢？

假设我们自定义的组件叫 DateRangeSingle

class组件的方式

<Form>
    <FormItem label="默认值" {...itemCols}>
          {getFieldDecorator('defaultValue', {})(<DateRangeSingle showTime={isDatetimePicker} format={dateFormat} />)}
    </FormItem>
</Form>

自定义组件被 getFieldDecorator 包裹，会获得 value 和 onChange 两个属性

onChange方法, 子组件调用此方法，可将值传给父组件，从而Form可拿到自定义组件的值

value属性，获得初始值

函数式组件的方式

import { Form } from 'antd';

const [form] = Form.useForm();
const { setFieldsValue, getFieldsValue } = form;

<Form>
    <FormItem name='defaultValue' label="默认值" {...itemCols}>
          <DateRangeSingle showTime={isDatetimePicker} format={dateFormat} />
    </FormItem>
</Form>

通过 Form.useForm(); 得到 form 实例 通过 setFieldsValue 设置表单数据 通过 getFieldsValue 获取表单数据