1.Input Enter事件javascript
<input onKeyUp={this.onKeyUp} onPressEnter={this.enter} /> onKeyUp = (e) => { if(e.keyCode === 13){ console.log("我是enter") } } enter= (e) => { console.log("我是enter") }
2.表单默认值(读取后台数据)java
<FormItem {...formItemLayout} label="手机号码" > {getFieldDecorator('phone', { rules: [{ required: true, message: '请输入手机号码', }], initialValue:info.phone?info.phone:'', })( <Input placeholder="请输入手机号码" /> )} </FormItem>
initialValue:info.phone?info.phone:”,
必须使用initialValue来动态赋值正则表达式
3.表单时间ide
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()转化一下ui
4.清空表单this
setModal1Hide(modal1Visible) { this.setState({ modal1Visible:modal1Visible, }) this.props.dispatch({ type: 'member/delFrom', payload: { oneMemberInfo:null }, }); this.props.form.resetFields() //清空全部 }
5.表单中嵌套动态选择框spa
<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.表单中使用正则表达式验证手机号orm
<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>
.blog