antd表单组件的双向绑定

image.png

        <Form {...layout} form={form}>
          <Item label="金额" name="money" rules={[requireRule]}>
            <InputNumber placeholder="请输入" min={1} />
          </Item>
          <Item label="日期" name="create_time" rules={[requireRule]}>
            <DatePicker />
          </Item>
        </Form>

react没有v-model这种双向绑定指令。所以要想实现双向绑定，就需要给输入框一个默认的value，并且通过change监听事件去改变value来达到双向绑定的目的。
在antd的表单组件中。如果给每个item组件设置了name。那么就不需要去手动实现双向绑定了。只需要通过
form.setFieldsValue方法。将对应的数据传过去。from组件就会根据对应的name和字段名来双向绑定。

可以通过Form.useForm()来拿到整个from对象。

form.resetFields()方法可以重置整个表单的数据。

form.validateFields()触发表单验证，并返回表单数据。

在使用antd的日期组件时，发现直接给组件指定年月日的日期格式的数据时，会报错 date.clone方法未定义。官网指明，antd的日期组件是依赖moment库实现的，并且指定默认值的时候也需要传入moment格式的日期。所以只需要将需要传入的日期用momentI()方法转一下格式就行了