天天看點

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,給我留言吧!