ant design pro 表单

1.Input Enter事件

?

1 2 3 4 5 6 7 8 9 10 11

<input onKeyUp={this.onKeyUp} onPressEnter={this.enter} />   onKeyUp = (e) => {   if(e.keyCode === 13){     console.log("我是enter")   } }   enter= (e) => {   console.log("我是enter") }

2.表单默认值（读取后台数据）

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<FormItem   {...formItemLayout}   label="手机号码" >   {getFieldDecorator('phone', {     rules: [{       required: true, message: '请输入手机号码',     }],     initialValue:info.phone?info.phone:'',   })(     <Input placeholder="请输入手机号码" />   )} </FormItem>

initialValue:info.phone?info.phone:”,
必须使用initialValue来动态赋值

3.表单时间

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

const FormItem = Form.Item;   <Form hideRequiredMark onSubmit={this.handleSubmit}>   <FormItem     {...formItemLayout}     label="时间"   >     {getFieldDecorator('joinTime', {       rules: [{         required: true, message: '请选择时间',       }],       initialValue:info? moment(info.joinTime, "YYYY-MM-DD"):''     })(       <DatePicker placeholder='请选择时间'  format="YYYY-MM-DD" />     )}   </FormItem> </Form>   //提交事件 handleSubmit = (e) => { //新增、编辑=提交   const { newAdd ,page} = this.state;    e.preventDefault();   this.props.form.validateFieldsAndScroll((err, values) => {     if (!err) {       const value = {...values, userId:newAdd,'joinTime': values['joinTime'].format('YYYY-MM-DD'),};       this.props.dispatch({         type: 'member/saveAgentInfo',         payload: value,       })     }   }); }

使用validateFieldsAndScroll（）获取表单数据后joinTime：moment（），需要使用format（）转化一下

4.清空表单

?

1 2 3 4 5 6 7 8 9 10 11 12

setModal1Hide(modal1Visible) {   this.setState({     modal1Visible:modal1Visible,   })   this.props.dispatch({     type: 'member/delFrom',     payload: {       oneMemberInfo:null     },   });   this.props.form.resetFields() //清空所有 }

5.表单中嵌套动态选择框

?

1 2 3 4 5 6 7 8 9 10 11 12

<FormItem {...formItemLayout} label="店名">   {getFieldDecorator('agentId', {     rules: [{       required: true, message: '选择加盟店',     }],     initialValue:OrderByOrderNo.storeName   })(     <Select defaultValue={OrderByOrderNo.storeName} className={styles.typeBtn}>       {AgentList.map(d => <Option value={d.userId} >{d.storeName}</Option>)}     </Select>   )} </FormItem>

6.表单中使用正则表达式验证手机号

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<FormItem   {...formItemLayout}   label="手机号码" >   {getFieldDecorator('phone', {     rules: [{       required: true, message: '请输入手机号码',     }, {       pattern: /^1\d{10}$/, message: '手机号格式错误！',     }],     initialValue:oneMemberInfo?oneMemberInfo.phone:'',     validateTrigger:'onBlur'   })(     <Input placeholder="请输入手机号码" />   )}   {     newAdd     ?     ''     :     <span className="ant-form-text" style={{color:'#389e0d'}}>       *手机号为加盟店登录账号及初始密码，请确保正确     </span>   }  </FormItem>

.