内容简介:当初还是但是,遭到了客户的强烈吐槽,“你们这个UI风格还是要一致撒”,哈哈:smile:,官方吐槽最为致命!没办法了,我自己也没法说服自己了,只能照着庆幸的是,很快
1、前情提要
当初还是 antd2.X
版本时, DatePicker
组件还不支持 mode
属性,不能单独设置为年份选择器。但是公司项目刚好很多地方都有根据年份做筛选的需求,因为 antd
不支持,因此,使用了 Select
组件来实现年份选择。
但是,遭到了客户的强烈吐槽,“你们这个UI风格还是要一致撒”,哈哈:smile:,官方吐槽最为致命!没办法了,我自己也没法说服自己了,只能照着 antd
的UI风格自己撸一个 YearPicker
咯。( 时间选择控件 YearPicker
基于 React
, antd
www.cnblogs.com/zyl-Tara/p/… )但是,老实说,效果不怎么理想,只能说实现了UI风格的一致,以及值的选择。但是,组件值的清除、动画过渡效果等都没有深入处理。
庆幸的是,很快 antd3.X
终于支持了年份选择。设置 mode="year"
便可以使用年份选择器。真是普天同庆!:sunglasses:
2、问题描述
话不多说,赶紧用起来!上代码,
import React, { Component } from 'react'; import { DatePicker } from 'antd'; export default class extends Component { onChange = val => { console.log(val) } render() { return ( <div> <DatePicker placeholder="请选择年份" mode="year" onChange={this.onChange} /> </div> ); } }复制代码
界面呈现出只有年份的选择器,nice!:heart::heart:
但是,接下来,你就直接懵了。因为不管你怎么点击按钮选择年份都不会起作用, onChange
事件根本不会触发,所以value获取不了!
哇,好气哦 :angry:
百思不得其解,然后去翻看 ant design
的github issue。终于看到一条中肯的 comment
。
<DatePicker mode="year" onPanelChange={(v) => {console.log(v)}}/>复制代码
只需要把 onChange
换成 onPanelChange
就好了。大功告成!可以愉快的获取时间了。
然而,另一个问题出现了,时间虽然是获取了,但是面板并没有关闭。:angry::angry:
继续查找问题,发现需要 open
这个属性控制面板的关闭。
这个大概是 antd
团队没考虑到? ️ ️
import React, { Component } from 'react'; import { DatePicker } from 'antd'; export default class extends Component { state = { isopen: false, time: null } render() { const { isopen, time } = this.state return ( <div> <DatePicker value={time} open={isopen} mode="year" placeholder="请选择年份" format="YYYY" onFocus={() => {this.setState({isopen: true})}} onBlur={() => {this.setState({isopen: false})}} onPanelChange={(v) => { console.log(v) this.setState({ time: v, isopen: false }) }}/> </div> ); } }复制代码
同时,通过 onFocus
和 onBlur
控制获取焦点和失焦时面板的显隐。
一切似乎很完美,能够获取值,也能正常关闭面板。
然而,快乐的时光总是短暂的,很快,测试便提出缺陷,“这个年份选择器为什么选择完年份后会有闪开闪关的效果,不符合要求哈”
“啊?:joy:那我看看呢”
明明记得之前没有这个问题啊,算了继续看看问题在哪儿吧。
3、终极解决方案
查看文档,发现 DatePicker
有个 onOpenChange
方法,是这样描述的:弹出日历和关闭日历的回调, function(status)
所以,可以通过 onOpenChange
方法判断当前的操作是要面板关闭还是打开,来控制面板的显隐。
所以,综上所有的思考,解决思路如下:
1、 onChange
方法无法触发获取到值,需要换成 onPanelChange
2、面板的显示隐藏需要 open
属性进行手动控制
3、 onFocus
、 onBlur
会导致闪开闪关,需要换成 onOpenChange
import React, { Component } from 'react'; import { DatePicker } from 'antd'; export default class extends Component { state = { isopen: false, time: null } render() { const { isopen, time } = this.state return ( <div> <DatePicker value={time} open={isopen} mode="year" placeholder="请选择年份" format="YYYY" onOpenChange={(status) => { if(status){ this.setState({isopen: true}) } else { this.setState({isopen: false}) } }} onPanelChange={(v) => { console.log(v) this.setState({ time: v, isopen: false }) }} /> onChange={() => { this.setState({time: null}) }} </div> ); } }复制代码
现在可以正常获取值,并且开关面板流畅,不会出现闪开闪关的效果。当然,细心你可能发现一个秘密,就是我在组件中用到了 onChange
事件,并且做了对值置空的操作。
这是为什么呢?
我们都知道 DatePicker
组件有一个 allowClear
属性,让我们可以通过点击输入框中的:x:icon来清除选择的值。
但是当我们设置 mode=“year”
后,这个 allowClear
便不起作用了。怎么办呢?因为 onChange
事件不会在选择值的时候触发,但是点击清除icon 却会触发。因此通过 onChange
事件便可以达到清除 value
的效果。
ok,完美解决~ :tada::tada:
以上所述就是小编给大家介绍的《Ant Design中DatePicker设置mode="year"无法获取value及关闭面板的解决方案》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Proxy-Go 控制面板 v1.9 发布,面板在手,代理无忧!
- Proxy-Go 控制面板 v2.0 发布,用了就忘不了的代理面板!
- 部署FastPanel主机控制面板
- 宝塔面板如何正确开启Memcached?
- IntelliJ IDEA(二) :面板介绍
- 深入理解BootStrap -- 面板(panel)17
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
DOM Scripting
Jeremy Keith / friendsofED / 2010-12 / GBP 27.50
There are three main technologies married together to create usable, standards-compliant web designs: XHTML for data structure, Cascading Style Sheets for styling your data, and JavaScript for adding ......一起来看看 《DOM Scripting》 这本书的介绍吧!