1娃属、格式
<Form? onSubmit={this.handleSubmit.bind(this)}>
? ? ?<FormItem {...formItemLayout} lable="名稱">
? ? ? ? ? ? ?{getFieldDecorator('name', {
? ? ? ? ? ? ? ? ? ?rules:[{required:true,message:'名稱不能為空',}],})(
? ? ? ? ? ? ? ? ? ? ? ? ? <Input />
? ? ? ? ? ? ? ?)}
? ? ? </FormItem>
</Form>
onSubmit:提交,可以獲取到表單中所有的數(shù)據(jù)
formItemLayout:面板設置矾端,響應式布局,設置列
getFieldDecorator:用于和表單進行雙向綁定卵皂,不需要綁定state,不需要設置value={}灯变,也不需要設置onChange={},
rules:各種驗證規(guī)則殴玛,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子節(jié)點的值發(fā)生改變時觸發(fā)刃泌,可以把對應的值轉存到 Redux store
? ? ?onFieldsChange(props,changedFields) {
? ? },
? 把 props 轉為對應的值凡壤,可用于把 Redux store 中的值讀出,可以在此給form賦值
? ?mapPropsToFields(props) {
? ? }
任一表單域的值發(fā)生改變時的回調(diào)
? ? onValuesChange(_,values) {}
});
exportdefaultEditLargeSize;
使用form的好處:
1耙替、能直接在提交按鈕中獲取form中的所有值
2、不需要額外寫校驗函數(shù)
3俗扇、不需要寫onChange函數(shù)
4、編輯的時候只需要在mapPropsToFields方法里面給相應的formItem賦值就可以了铜幽,不需要寫onChange方法滞谢,在最后的按鈕中一樣能獲取所有改變過后的值。