你好!刘斩仙

业精于勤,荒于嬉;行成于思,毁于随。

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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25252769/article/details/79958206
上一篇手指(鼠标)左右滑动控制进度
下一篇ant desgin pro 跨页面传参
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭