基于antd DatePicker的年份组件

最近在开发的时候，发现antd的datepicker组件，设置mode="year"时候，年份组件交互上有一些bug问题，后来自己基于antd上的picker，进行了改装，能进行年份选择的效果

组件代码如下：

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import ReactDOM from 'react-dom';

class YearPicker extends React.Component {
  static getDerivedStateFromProps(nextProps) {
    if ('value' in nextProps) {
      return {
        ...(nextProps.value || {})
      };
    }
    return null;
  }
  constructor(props) {
    super(props);
    const value = props.value;
    // console.log('年份选择', value, props);
    this.state = {
      open: false
    };
  }
  triggerChange = changedValue => {
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(changedValue);
    }
  };
  changeRender = v => {
    // console.log("changeRender_v.m", v);
    this.setState(
      {
        open: false
      },
      () => this.triggerChange(moment(v).format('YYYY'))
    );
  };
  
  clearValue = () => {
    this.triggerChange();
  };
  
  setOpenState = () => {
    this.setState({
      open: !this.state.open
    });
  };
  
  componentDidMount = () => {
  };

  render() {
    const { open } = this.state;
    const { value, style } = this.props;

    return (
      <DatePicker
        mode="year"
        format="YYYY"
        placeholder={this.props.placeholder}
        value={value ? moment(value) : null}
        onPanelChange={this.changeRender}
        onOpenChange={this.setOpenState}
        onChange={this.clearValue} //点击清除按钮的回调
        open={open}
        style={{ ...style }}
      />
    );
  }
}

export default YearPicker;

调用方式：

<YearPicker
     value={this.state.yearValue}
     placeholder="选择年份"
     onChange={this.onOptionChange}
/>

onchange回调方法：

// selectA改变的回调
  onOptionChange = value => {
    //console.log(value);
    this.setState({
      yearValue:value
    });
  };

这里使用的方法是通过组件外部的props的value来控制年份所选的值 (由于业务原因)

其实在yearpicker内部 通过内部的state保管自己的value亦可