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方法,在最后的按钮中一样能获取所有改变过后的值。