Ant design pro 開闢筆記 - 表單和數據綁定

2019年8月24日 107次阅读 来源: PMPSSPMP

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所須要的數據：

  1. mapModelToProps()將state中所須要的數據映射到props上。
  2. mapPropsToFields()則將props中的數據映射到表單字段上，並更新字段的value值。注重運用這個函數必須用Form.createFormField()封裝須要綁定的字段。

Ant design運用的表單組件是
rc-form

運用的考證組件是
async-validator

    原文作者：PMPSSPMP
    原文地址: https://segmentfault.com/a/1190000015025000
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞