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>

巴特西

ant design pro 表单

最新文章

热门文章