需求: 日期控件只能选择年份
实现: 使用 antd 的 DatePicker 组件,并配置 mode=‘year’,picker 配置如下
<DatePicker
mode='year'
format='yyyy'
/>
描述:
能正常选择年份,但选择完年份后 picker 面板不会自动消失
看了 github 的 issue 有很多人也遇到了这个问题,但是都没有好的解决办法
因为 antd 是基于 react 实现的,那么如果要控制一个组件是否显示,应该也是会定义一个状态的吧,那么现在只要找到这个状态,并在每次 change 的时候,手动修改一下,岂不是可以解决?
首先,拿到 picker 的上下文
<DatePicker
ref={picker => this.picker = picker}
mode='year'
format='yyyy'
/>
定义 panelChange 事件
<DatePicker
ref={picker => this.picker = picker}
mode='year'
format='yyyy'
onPanelChange={this.handleOnPanelChange}
/>
handleOnPanelChange = () => {
}
每次 panelChange 手动修改 state
<DatePicker
ref={picker => this.picker = picker}
mode='year'
format='yyyy'
onPanelChange={this.handleOnPanelChange}
/>
handleOnPanelChange = () => {
this.picker.picker.state.open = false
}
别问我是怎么找到这个状态的,亲测可用

2163

被折叠的 条评论
为什么被折叠?



