【骚操作】antd YearPicker 实现

演示 demo
废话不说，上代码：

import React from "react";
import { DatePicker } from "antd";
import "./App.css";

class YearPicker extends React.Component {
  state = {
    value: null,
    open: false
  };

  setOpenState = () => {
    this.setState({
      open: !this.state.open
    });
  };

  changeValue = v => {
    this.setState({
      value: v
    });
  };

  changeRender = v => {
    this.setState({
      value: v,
      open: false
    });
  };

  test = () => {
    console.log("test");
  };

  render() {
    const { open } = this.state;
    if (!open)
      return (
        <DatePicker
          mode="year"
          format="YYYY"
          value={this.state.value}
          onChange={this.changeValue}
          onPanelChange={this.changeRender}
          onOpenChange={this.setOpenState}
          open={open}
        />
      );
    else {
      return (
        <DatePicker
          mode="year"
          format="YYYY"
          value={this.state.value}
          onChange={this.changeValue}
          onPanelChange={this.changeRender}
          open={open}
        />
      );
    }
  }
}

class App extends React.Component {
  render() {
    return (
      <main>
        <YearPicker />
      </main>
    );
  }
}

export default App;

原理：利用官网 open，onPanelChange 的 api 做成受控组件，手动实现。