antd 年份控件

antd 年份控件解决点击无法选中问题, typescaript + hooks

import React, { FC, useState } from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';

interface YearDatePickerProps {
  year?: any,
  changeYear?: any,
  allowClear?: any,
}

const YearDatePicker: FC<YearDatePickerProps> = (props) => {
  const { changeYear } = props;
  const [yearValue, setYearValue] = useState(props.year || moment(new Date()).format('YYYY'));
  const [isopen, setIsOpen] = useState(false);
  const dateChange = (date: any) => {
    setYearValue(date);
    setIsOpen(false);
    const newYear = moment(date).format('YYYY');
    if (changeYear && typeof changeYear === 'function') {
      changeYear(newYear);
    }
  }

  const onOpenChange = (status: any) => {
    status ? setIsOpen(status) : setIsOpen(false);
  }

  const clearValue = () => {
    // @ts-ignore
    // setYearValue(null);
  }
  return (
    <DatePicker
        mode={'year'}
        // showTime
        allowClear={props.allowClear}
        format="YYYY"
        placeholder="选择日期"
        onOpenChange={onOpenChange}
        onPanelChange={dateChange}
        value={moment(yearValue)}
        open={isopen}               
        onChange={clearValue}
      />
  )
}

export default YearDatePicker;