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>

.