React的Ant Design日期组件年月显示，重置，返现笨办法实现disabled（不能实现onBlur要自己写判断控）

React的Ant Design日期组件年月显示这个在2.0不能实现好像官方在3.0以后能实现了

我在网上找了一个案例测试的可以用但是用到自己的项目中不怎么好使用
案例如下

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker } from "antd";

import locale from "antd/es/date-picker/locale/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
const { RangePicker } = DatePicker;

class ControlledRangePicker extends React.Component {
  state = {
    mode: ["month", "month"],
    value: []
  };

  handlePanelChange = (value, mode) => {
    this.setState({
      value,
      mode: [
        mode[0] === "date" ? "month" : mode[0],
        mode[1] === "date" ? "month" : mode[1]
      ]
    });
  };

  handleChange = value => {
    this.setState({ value });
  };

  render() {
    const { value, mode } = this.state;
    return (
      <RangePicker
        locale={locale}
        placeholder={["开始月份", "结束月份"]}
        format="YYYY-MM"
        value={value}
        mode={mode}
        onChange={this.handleChange}
        onPanelChange={this.handlePanelChange}
      />
    );
  }
}

ReactDOM.render(
  <div>
    <ControlledRangePicker />
  </div>,
  document.getElementById("container")
);

自己感觉不怎么好用可能是因为自己太菜的的原因就自己写了一个组件

这个是自己封装的一个组件date.js

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;

export default class ControlledDatePicker extends React.Component {
  state = { mode: 'time' };

  handleOpenChange = (open) => {
    if (open) {
      this.setState({ mode: 'time' });
    }
  }

  handlePanelChange = (value, mode) => {
    this.setState({ mode });
  }

  render() {
    return (
      <DatePicker
        mode={this.state.mode}
        showTime
        onOpenChange={this.handleOpenChange}
        onPanelChange={this.handlePanelChange}
      />
    );
  }
}

export class ControlledRangePicker extends React.Component {
  state = {
    mode: ['month', 'month'],
    value: [],
    val111: [],
  };

  componentWillMount() {
    const { valueOne } = this.props;
    const { value } = this.state;
    let val111;
    if (valueOne) {
      val111 = [moment(`${valueOne[0].substring(0, 4)}-${valueOne[0].substring(4, 6)}`), moment(`${valueOne[1].substring(0, 4)}-${valueOne[1].substring(4, 6)}`)];
    } else {
      val111 = value;
    }
    this.setState({
      val111,
    });
  }

  handlePanelChange = (value, mode) => {
    const { time } = this.props;
    this.setState({
      val111: value,
      mode: [
        mode[0] === 'date' ? 'month' : mode[0],
        mode[1] === 'date' ? 'month' : mode[1],
      ],
    });
    time(value);
  }

  thena = () => {
    this.setState({
      val111: [],
    });
    this.handlePanelChange(null, ['month', 'month']);
  }


  render() {
    const { mode, val111 } = this.state;
    return (
      <RangePicker
        placeholder={['开始时间', '结束时间']}
        format="YYYY-MM"
        value={val111}
        mode={mode}
        onPanelChange={this.handlePanelChange}
        onChange={this.thena}
      />
    );
  }
}

这个是引用的组件（只是分享的自己的思路和办法，具体东西还是要根据自己需求来就行了）

import { ControlledRangePicker  } from './date';
//这个返现的值要根据自己需求来
const Cc = [ moment , moment];
//这个是向组件传入自己输入的值
time = (value)  => {
		this.setState({
			startTime: value && value[0] ? moment(value[0]).format('YYYYMM') : ' ';
			endTime: value && value[1] ? moment(value[1]).format('YYYYMM') : ' ';
		  });
}
//time为向组件传送的值  valueOne这个是需要返现的值 alloeClear这个是要重置的方法
<ControlledRangePicker  time={this.time} valueOne={Cc} allowClear={this.onChange} >

其实也是可以实现disabled这个不可修改的方法的那就是在在修改的页面在引入date.js，变成的dateOne.js然后在

<RangePicker
        placeholder={['开始时间', '结束时间']}
        format="YYYY-MM"
        value={val111}
        mode={mode}
        onPanelChange={this.handlePanelChange}
        onChange={this.thena}
        disabled
      />

我现在的能力就只能用这样的一个死办法来解决这个问题，我在页面上用disabled={}带值得方式来实现但是好像没成功

如果小伙伴或者大佬看到了有独特的方法和见解欢迎探讨和指教