项目中需要填写年份，产品觉得手动输入不太严谨，需要做成年份选择器。
去 antdesign 官网查看，发现有受控面板，通过组合 mode 和 onPanelChange 可以控制要展示的面板。
<DatePicker
mode="year"
placeholder="请选择年份"
format="YYYY"
onPanelChange={this.handlePanelChange}
/>
handlePanelChange = value => {
console.log(">>>>>", value)
// 处理得到的 value
// ...
};
可以通过 onPanelChange 获取到时间，但是获取到时间之后面板并没有关闭。
再次去官网查看，发现有 open 属性和 onOpenChange 回调， open 属性控制弹层是否展开， onOpenChange 回调是弹出日历和关闭日历的回调。
constructor(props) {
super(props);
this.state = {
isopen: false,
time: null,
};
}
// 弹出日历和关闭日历的回调
handleOpenChange = status => {
// console.log(status)
if (status) {
this.setState({ isopen: true });
} else {
this.setState({ isopen: false });
}
};
//得到 value 并处理
handlePanelChange = value => {
// console.log(">>>>>", value)
//处理 value 操作
//...
//设置 isopen
this.setState({
isopen: false,
});
};
//清除输入框中的值，点击控件的 x ，清除值操作
clearValue = () => {
this.setState({
time: null,
})
};
render() {
return (
<DatePicker
value={this.state.time}
open={this.state.isopen}
mode="year"
placeholder="请选择年份"
format="YYYY"
onOpenChange={this.handleOpenChange}
onPanelChange={this.handlePanelChange}
onChange={this.clearValue}
/>
);
}
总结：通过 open 属性控制面板的开关，通过 onOpenChange 处理面板开关的回调，通过 onPanelChange 得到所选日期的值，通过 onChange 来清除选中的值。
