ant design 使用中的一些tips

使用 ant design 當中總結的一些小tips 和issue

 

1. 時間類組件的 value 類型為 moment 對象，所以在提交服務器前需要預處理。如Timepicker，Datepicker。

2.TimePicker 設置 minuteStep ，選擇hour，默認把現在時間的分鍾賦值給minute，也就是會選擇不符合規則的時間。

有關issue：  https://github.com/ant-design/ant-design/issues/9906

我的解決辦法：Dynamic verification。

verification = (value) =>{
    if(!value) return;
    if(moment(value).minute()!==0&&moment(value).minute()!==30){
        this.props.form.setFieldsValue({
            time: value.minutes(0),
        });
    }
}

3. TimePicker中無法表示一天的結束 如00:00 到 24:00（下一天00:00）

相關issue： https://github.com/react-component/time-picker/issues/95

解決辦法：使用Cascader組件 組裝成moment選擇時分的組件。

4.即時搜索（實時搜索）

使用AutoComplete組件，也是antd 十大原則之一  ——即時反應

https://ant.design/docs/spec/reaction-cn

https://ant.design/components/auto-complete-cn/

5.Notification 通知提醒組件在切換其他頁面的時候，如何給他消失？

解決辦法：使用notification.destroy()

componentWillUnmount(){
    notification.destroy();
}

在componentWillUnmount生命周期銷毀notification

6.Notification  config的 getContainer配置渲染節點問題。

issue：https://github.com/ant-design/ant-design/issues/6036