版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25252769/article/details/79958206
1、Input Enter事件
<input onKeyUp={this.onKeyUp} onPressEnter={this.enter}>
onKeyUp = (e) => {
if(e.keyCode === 13){
console.log("我是enter")
}
}
enter= (e) => {
console.log("我是enter")
}
2、表单默认值(读取后台数据)
<FormItem
{...formItemLayout}
label="手机号码"
>
{getFieldDecorator('phone', {
rules: [{
required: true, message: '请输入手机号码',
}],
initialValue:info.phone?info.phone:'',
})(
<Input placeholder="请输入手机号码" />
)}
</FormItem>
initialValue:info.phone?info.phone:’’,
必须使用initialValue来动态赋值
3、表单时间
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、清空表单
setModal1Hide(modal1Visible) {
this.setState({
modal1Visible:modal1Visible,
})
this.props.dispatch({
type: 'member/delFrom',
payload: {
oneMemberInfo:null
},
});
this.props.form.resetFields() //清空所有
this.props.form.setFields({name:""})//清楚指定的表单,getFieldDecorator=》name
}
5、表单中嵌套动态选择框
<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、表单中使用正则表达式验证手机号
<FormItem
{...formItemLayout}
label="手机号码"
>
{getFieldDecorator('phone', {
rules: [{
required: true, message: '请输入手机号码',
}, {
pattern: /^1\d{10}$/, message: '手机号格式错误!', // 验证密码/^[0-9a-zA_Z]{4,6}$/
}],
initialValue:oneMemberInfo?oneMemberInfo.phone:'',
validateTrigger:'onBlur'
})(
<Input placeholder="请输入手机号码" />
)}
{newAdd? '':<span className="ant-form-text" style={{color:'#389e0d'}}> *手机号为加盟店登录账号及初始密码,请确保正确</span>}
</FormItem>