素材巴巴 > 程序开发 >

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

程序开发 2023-09-24 13:58:19

描述:

切换日历控件的日期时,会触发选中日期事件
V3不存在这个问题
V4新有的相当于 onchangeonselect会同时触发
因为业务上,选中事件会触发请求,在页面会有些显示,所以有些影响
效果:

在这里插入图片描述
解决思路:

  1. 弄清触发机制

在这里插入图片描述
使用select选择年月 会调用绑定的onChange方法
本来想在这里加个字段做甄别,但是组件包装一层后,只会传一个参数过来,拿不到第二个参数

代码中写了两个参数:
在这里插入图片描述
源码中只会拿一个参数:
并且如果绑定了onselect会触发onselect
在这里插入图片描述

  1. 找到触发顺序

在这里插入图片描述
选择日期>>onChange>>onSelect

  1. 用参数做甄别

刚刚第一步试过了,无法在已定的func做第二参数当甄别
所以自定义一个函数,在函数中把握顺序,然后再回调
代码如下:
在这里插入图片描述
在这里插入图片描述
这里用了一个全局变量changed来做甄别
changed不在state里,因为在state里可能会有异步时间差
onSelect如下
在这里插入图片描述
整体顺序
在这里插入图片描述
流程:

  1. select触发自定义handleChange
  2. handleChange里更改全局的changed值作为甄别,然后回调调用onChange
  3. 触发onSelect,进入onSelect被changed拦截
  4. 回到handleChange改回changed值,以便不影响后续onSelect

代码集合
在这里插入图片描述
在这里插入图片描述
有其他方法或官方api,给我留言吧!


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。