ant design pro 表单

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() //清空所有
}

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: '手机号格式错误！',
    }],
    initialValue:oneMemberInfo?oneMemberInfo.phone:'',
    validateTrigger:'onBlur'
  })(
    <Input placeholder="请输入手机号码" />
  )}
  {
    newAdd
    ?
    ''
    :
    <span className="ant-form-text" style={{color:'#389e0d'}}>
      *手机号为加盟店登录账号及初始密码，请确保正确
    </span>
  }
</FormItem>

.