RangePicker组件的onChange bug/显示bug

83 阅读1分钟

场景复现:

假如已选时间是:

step 1

选择年份或者月份

step 2

最终点击月份,这里我选择月份,然后点击1月

注意:此时选择器内显示的是 点击的年份-点击的月份-原值的日期

step 3

点击气泡弹出框以外的区域,收起弹出框。

此时,看起来已经选上了日期。

step 4

查看接口请求

可以看到,实际上并没有选上日期。

实际上,必须要点击准确的日期才会触发onChange。

先贴一下我当时的代码:

<ConfigProvider locale={locale}>
  <RangePicker
    className='mr-4'
    value={dateVal}
    onChange={(date) => { setDateVal(date) }}
    />
</ConfigProvider>

解决方法:

加一个onPanelChange属性

onPanelChange官方说明:日历面板切换的回调 function(value, mode)

直接贴一个代码:

<ConfigProvider locale={locale}>
  <RangePicker
    className='mr-4'
    value={dateVal}
    onChange={(date) => { setDateVal(date) }}
    onPanelChange={(date) => { setDateVal(date) }}
    />
</ConfigProvider>