Ant design pro 开发笔记 - 表单和数据绑定

最新推荐文章于 2023-11-28 16:36:37 发布

转载最新推荐文章于 2023-11-28 16:36:37 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015025000

文章标签：

#javascript #json #后端 #ViewUI

本文介绍AntD中表单组件的使用方法，包括 getFieldDecorator() 的基本使用、配置选项及数据验证规则设置等。同时介绍了如何通过 mapPropsToFields() 将数据映射到表单字段上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd支持表单双向绑定，开发过程中无需通过onChange()回调函数去获取组件的值，通过 getFieldDecorator() 可以自动完成数据绑定的功能。

{
    getFieldDecorator('email', {})(<Input />)
}

第二个参数是options，不同的配置可以完成更多的任务，例如必填数据验证

{
    let opt = { rules: [ { required: true, message: "the field must supply." } ] }
    getFieldDecorator('email', opt)(<Input />)
}

也可以完成更多业务逻辑数据验证，例如：

{
    let opt = { rules: [ { type: 'email', message: "It's invalid email address." } ] }
    getFieldDecorator('email', opt)(<Input />)
}

还可以指定一个初始值：

{
    let opt = { initialValue: 'hello@mail.com' }
    getFieldDecorator('email', opt)(<Input />)
}

注意：通过initialValue指定的初始值，只在第一次render()中起作用。如果我们通过API获取了数据之后，表单数据不会发生变化。
这个时候就要用到mapPropsToFields()来为字段绑定数据。

{
    function mapModelToProps(model) {
      return {
        item: model.requirement.item,
        loading: model.loading.effects['requirement/fetch']
      };
    }
    function mapPropsToFields(props) {
      return {
        description: Form.createFormField({
          value: props.item.description
        })
      }
    }
    export default connect(mapModelToProps)(Form.create({mapPropsToFields})(Edit));
}

这里有两个函数来map所需要的数据：

mapModelToProps()将state中所需要的数据映射到props上。
mapPropsToFields()则将props中的数据映射到表单字段上，并更新字段的value值。注意使用这个函数必须用Form.createFormField()封装需要绑定的字段。

Ant design使用的表单组件是rc-form
使用的验证组件是async-validator