ant design pro 表单

版权声明：本文为博主原创文章，未经博主允许不得转载。 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'}}>&nbsp;&nbsp;&nbsp;*手机号为加盟店登录账号及初始密码，请确保正确</span>}  
</FormItem>