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。

1 verification = (value) =>{
2     if(!value) return;
3     if(moment(value).minute()!==0&&moment(value).minute()!==30){
4         this.props.form.setFieldsValue({
5             time: value.minutes(0),
6         });
7     }
8 }

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

原文地址:https://www.cnblogs.com/ybleeho/p/10372383.html