antd-form表单操作

1、格式

<Form  onSubmit={this.handleSubmit.bind(this)}>

     <FormItem {...formItemLayout} lable="名称">

             {getFieldDecorator('name', {

                   rules:[{required:true,message:'名称不能为空',}],})(

                          <Input />

               )}

      </FormItem>

</Form>

onSubmit:提交，可以获取到表单中所有的数据

formItemLayout：面板设置，响应式布局，设置列

getFieldDecorator：用于和表单进行双向绑定，不需要绑定state，不需要设置value={}，也不需要设置onChange={},

rules:各种验证规则，required:设置为true，必须，false非必需

const{getFieldDecorator}=this.props.form;

const formItemLayout={

       labelCol:{

          xs:{span:24},

         sm:{span:6},

      },

      wrapperCol:{

            xs:{span:24},

            sm:{span:14},

      },

};

constEditLargeSize=Form.create({

  当Form.Item子节点的值发生改变时触发，可以把对应的值转存到 Redux store

     onFieldsChange(props,changedFields) {

    },

  把 props 转为对应的值，可用于把 Redux store 中的值读出,可以在此给form赋值

   mapPropsToFields(props) {

    }

任一表单域的值发生改变时的回调

    onValuesChange(_,values) {}

});

exportdefaultEditLargeSize;

使用form的好处：

1、能直接在提交按钮中获取form中的所有值

2、不需要额外写校验函数

3、不需要写onChange函数

4、编辑的时候只需要在mapPropsToFields方法里面给相应的formItem赋值就可以了，不需要写onChange方法，在最后的按钮中一样能获取所有改变过后的值。