在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ antd在Form中使用DatePicker的校驗問題

antd在Form中使用DatePicker的校驗問題

先給出demo， demo
有一個開始時間和一個結(jié)束時間，要求是開始時間必須小于結(jié)束時間

重現(xiàn)步驟：

  1. 選一個開始時間，比如2018-08-23
  2. 選一個結(jié)束時間，要小于開始時間，比如2018-08-22，此時結(jié)束時間那邊提示結(jié)束時間必須大于開始時間，目前為止沒問題
  3. 再選擇一個開始時間，要小于結(jié)束時間，比如2018-08-21，此時結(jié)束時間的錯誤提示還在，主要就是這一步，怎么再次校驗結(jié)束時間

clipboard.png

在不使用RangePicker、不使用disabledDate、不自定義Form的validateStatus、help等的情況下，怎么再次校驗呢？ 我在DatePicker的onChange中調(diào)用了validateFieldsAndScroll`，好像沒啥用

回答
編輯回答
哎呦喂

兩個日期框都加自定義校驗就可以了，其中一個例子，另一個自己判斷邏輯就好了

{
    getFieldDecorator('date1', { initialValue: moment(),
        rules: [{
            required: true,
            validator: (rule, value, callback) => {
            const edate = getFieldValue('date2');
            if (moment(edate).isBefore(moment(value))) {
                callback();
            } else {
                callback('you error message');
            }
        },
        message:'日期必須大于xxx'
    }]
})
    (
        <DatePicker
            placeholder='日期1'
            format='YYYY-MM-DD dddd'
            onChange={date => { /*do something*/ }}
        />
)}
2018年8月10日 04:25
編輯回答
莫小染

我在你的代碼中添加了斷點調(diào)試了一下，發(fā)現(xiàn)了問題的原因：

  1. validateFieldsAndScroll 可以傳個 { force: true } 作為第二個參數(shù)見文檔))，否則的話，未修改過的字段是不會再次觸發(fā)校驗的；
  2. 你在 onChange 中拿到的值是新的值，但這個值還沒有更新到組件的 state 中，也就是說，此時你調(diào)用 form.getFieldValue('timeStart') 拿到的值還是老的值；

針對上面的原因，解決方案也比較清楚了：

  1. 給 validateFieldsAndScroll 添加 { force: true } 參數(shù)；
  2. 把 form.validateFieldsAndScroll 的調(diào)用放到 setTimeout(() => {}, 0) 里面
2018年3月15日 03:38
編輯回答
墨小白

沒人遇到過這種需求嗎？

2017年3月30日 00:58