天天看点

AntdV4日历控件Calendar日期选择触发机制bug

描述:

切换日历控件的日期时,会触发选中日期事件

V3

不存在这个问题

V4

新有的相当于

onchange

onselect

会同时触发

因为业务上,选中事件会触发请求,在页面会有些显示,所以有些影响

效果:

AntdV4日历控件Calendar日期选择触发机制bug

解决思路:

  1. 弄清触发机制
AntdV4日历控件Calendar日期选择触发机制bug

使用select选择年月 会调用绑定的

onChange

方法

本来想在这里加个字段做甄别,但是组件包装一层后,只会传一个参数过来,拿不到第二个参数

代码中写了两个参数:

AntdV4日历控件Calendar日期选择触发机制bug

源码中只会拿一个参数:

并且如果绑定了onselect会触发onselect

AntdV4日历控件Calendar日期选择触发机制bug
  1. 找到触发顺序
AntdV4日历控件Calendar日期选择触发机制bug

选择日期>>onChange>>onSelect

  1. 用参数做甄别

刚刚第一步试过了,无法在已定的

func

做第二参数当甄别

所以自定义一个函数,在函数中把握顺序,然后再回调

代码如下:

AntdV4日历控件Calendar日期选择触发机制bug
AntdV4日历控件Calendar日期选择触发机制bug

这里用了一个全局变量

changed

来做甄别

changed

不在

state

里,因为在

state

里可能会有异步时间差

onSelect

如下

AntdV4日历控件Calendar日期选择触发机制bug

整体顺序

AntdV4日历控件Calendar日期选择触发机制bug

流程:

  1. select

    触发自定义

    handleChange

  2. handleChange

    里更改全局的

    changed

    值作为甄别,然后回调调用

    onChange

  3. 触发

    onSelect

    ,进入

    onSelect

    被changed拦截
  4. 回到

    handleChange

    改回

    changed

    值,以便不影响后续

    onSelect

代码集合

AntdV4日历控件Calendar日期选择触发机制bug
AntdV4日历控件Calendar日期选择触发机制bug

有其他方法或官方api,给我留言吧!