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

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