React 选择年组件的 问题

    引工作要求，需要用react写一个年的组件，但是antd里面没有只选择年的组件，上网找了好久，才找到一位大神写的东西，自己稍加修改了一下：
    YearPicker.js:
      `import React, { Component } from "react";
       import { Icon } from "antd";
       import './record.css';//这个文件自己选择一个温暖的地方放

	 class YearPicker extends Component {
	    constructor(props) {
	        super(props);
	        this.state = {
	            isShow: false,
	            selectedyear: "",
	            years: []
	        };
	    }

    componentWillMount() {
        let { defaultValue } = this.props;
        this.setState({ selectedyear: defaultValue },()=>{
            console.log('defaultValue',defaultValue);
        });
    }
    componentDidMount() {
        let _this = this;
        document.addEventListener(
            "click",
            function(e) {
                const { isShow } = _this.state;
                let clsName = e.target.className;
                if (
                    clsName.indexOf("calendar") === -1 &&
                    e.target.tagName !== "BUTTON" &&
                    isShow
                ) {
                    _this.hide();
                }
            },
            false
        );
    }
    //初始化数据处理
    initData = (operand, defaultValue) => {
        console.log(operand,defaultValue);
        operand = operand ? operand : 12;
        let year = defaultValue - 1970;
        console.log(year);
        let curr = year % operand;
        console.log('curr',curr)
        let start = defaultValue - curr;

        let end = parseInt(defaultValue) + parseInt(operand) - 1 - curr;
        console.log('start',start);
        console.log('end',end);
        this.getYearsArr(start, end);
    };
    //   获取年份范围数组
    getYearsArr = (start, end) => {
        console.log('start1',start);
        console.log('end1',end);
        let arr = [];
        for (let i = start; i <= end; i++) {
            console.log('i',Number(i));
            arr.push(Number(i));
        }
        this.setState({
            years: arr
        },console.log('year',this.state.years));
    };
    // 显示日历年组件
    show = () => {
        const { selectedyear } = this.state;
        let { operand } = this.props;
        operand = operand ? operand : 12;
        this.initData(operand, selectedyear);
        this.setState({ isShow: true });
    };
    // 隐藏日期年组件
    hide = () => {
        this.setState({ isShow: false });
    };
    // 向前的年份
    prev = () => {
        const { years } = this.state;
        if (years[0] <= 1970) {
            return;
        }
        this.getNewYearRangestartAndEnd("prev");
    };
    // 向后的年份
    next = () => {
        this.getNewYearRangestartAndEnd("next");
    };

    //   获取新的年份
    getNewYearRangestartAndEnd = type => {
        const { selectedyear, years } = this.state;
        let operand = Number(this.props.operand);
        operand = operand ? operand : 12;
        let start = Number(years[0]);
        console.log('start',start);
        let end = Number(years[years.length - 1]);
        let newstart;
        let newend;
        if (type == "prev") {
            newstart = parseInt(start - operand);
            newend = parseInt(end - operand);
            this.setState({
                selectedyear:parseInt(selectedyear)-1,
            },()=>{
                this.getYearsArr(newstart, newend);
            })
        }
        if (type == "next") {
            newstart = parseInt(start + operand);
            newend = parseInt(end + operand);
            this.setState({
                selectedyear:parseInt(selectedyear)+1,
            },()=>{
                this.getYearsArr(newstart, newend);
            })
        }


    };

    // 选中某一年
    selects = e => {
        let val = Number(e.target.value);
        this.hide();
        this.setState({ selectedyear: val });
        if (this.props.callback) {
            this.props.callback(val);
        }
    };

    render() {
        const { isShow, years, selectedyear } = this.state;

        return (
            <div className="calendar-wrap">
                <span className="ant-calendar-picker">
                <div className="">
                    <input
                        className="ant-calendar-picker-input ant-input"
                        placeholder="请选择年份"
                        onFocus={this.show}
                        value={selectedyear}
                        readOnly
                    />
                    <span  className="ant-calendar-picker-icon" ></span>
                </div>
                </span>
                {isShow ? (
                    <List
                        data={years}
                        value={selectedyear}
                        prev={this.prev}
                        next={this.next}
                        cback={this.selects}
                    />
                ) : (
                    ""
                )}
            </div>
        );
    }
}
const List = props => {
    const { data, value, prev, next, cback } = props;
    return (
        <div className="ant-calendar ant-calendar-month" tabIndex="0">
          <div className="ant-calendar-month-panel" style={{position: 'relative'}}>
            <div>
            <div className="ant-calendar-month-panel-header">
                <a
                    type="double-left"
                    role="button"
                    className="ant-calendar-month-panel-prev-year-btn"
                    title="上一年"
                    onClick={prev}
                ></a>
                <span className="calendar-year-range">{value}</span>
                <a
                    type="double-right"
                    className="ant-calendar-month-panel-next-year-btn"
                    title=""
                    role="button"
                    onClick={next}
                ></a>
            </div>
            <div className="ant-calendar-month-panel-body">
                <ul className="calendar-year-ul">
                    {data.map((item, index) => (
                        <li
                            key={index}
                            title={item}
                            className={
                                item == value
                                    ? "calendar-year-li calendar-year-selected"
                                    : "calendar-year-li"
                            }
                        >
                            <button onClick={cback} value={item}>
                                {item}
                            </button>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
      </div>
    </div>
    );
};

export default YearPicker;`

record.css:
   .calendar-body-year {
	width: 100%;
	height: 218px;
}
.calendar-year-ul {
	list-style: none;
}
.calendar-year-li {
	float: left;
	text-align: center;
	width: 76px;
	cursor: pointer;
}
 button {
	cursor: pointer;
	outline: none;
	border: 0;
	display: inline-block;
	margin: 0 auto;
	color: rgba(0, 0, 0, 0.65);
	background: transparent;
	text-align: center;
	height: 24px;
	line-height: 24px;
	padding: 0 6px;
	border-radius: 4px;
	transition: background 0.3s ease;
	margin: 14px 0;
}
.hover {
	 color:  #108ee9;
 }
.ant-calendar-picker-input {
	outline: none;
	display: block;
}
.ant-input {
	position: relative;
	display: inline-block;
	padding: 4px 7px;
	width: 100%;
	height: 28px;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.65);
	background-color:#fff ;
	background-image: none;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	transition: all .3s;
}
.ant-calendar-picker-clear{
	position: absolute;
	width: 14px;
	height: 14px;
	right: 8px;
	top: 50%;
	margin-top: -7px;
	line-height: 14px;
	font-size: 12px;
	transition: all .3s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
*:before, *:after {
	box-sizing: border-box;
}
.ant-calendar-picker {
	position: relative;
	display: inline-block;
	outline: none;
	font-size: 12px;
	transition: opacity 0.3s;
}
.ant-calendar-month-panel-header {
	height: 34px;
	line-height: 34px;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-bottom: 1px solid #e9e9e9;
}
.ant-calendar {
	position: relative;
	outline: none;
	width: 231px;
	border: 1px solid #fff;
	list-style: none;
	font-size: 12px;
	text-align: left;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
	background-clip: padding-box;
	line-height: 1.5;
}
.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn {
	position: absolute;
	top: 0;
	color: rgba(0, 0, 0, 0.43);
	font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
	padding: 0 5px;
	font-size: 16px;
	display: inline-block;
	line-height: 34px;
}
.ant-calendar-month-panel-body {
	height: calc(100% - 34px);
}
.ant-calendar-month-panel-header {
	height: 34px;
	line-height: 34px;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-bottom: 1px solid #e9e9e9;
}

.ant-calendar-month .ant-calendar-month-panel, .ant-calendar-month .ant-calendar-year-panel {
	top: 0;
	height: 248px;
}
.ant-calendar-month-panel-selected-cell  {
	background-color: #108ee9;
	color: #fff;
}

.calendar-year-selected> button {
	background: #108ee9;
	color: #fff;
}
.calendar-year-selected> button :hover{
	color: #fff;
}

.ant-calendar-picker-icon::after {
	color: rgba(0, 0, 0, 0.43);
}
.ant-calendar-picker-icon:after {
	content: "\E6BB";
	font-family: "anticon";
	font-size: 12px;
	color: rgba(0, 0, 0, 0.43);
	display: inline-block;
	line-height: 1;
}
.ant-col-5 {
	display: block;
	width: 20.83333333%;
}

使用：chargeTrendAnalysis.js：
   let ChoseDate=this.state.dateFlag==='M'?(
            <MonthPicker onChange={onChange}  placeholder="Select month" format={monthFormat}/>
        ):(this.state.dateFlag==='d'?(
                <DatePicker    mode='year' onYearChange={onYearChange()}/>
            ):  <YearPicker
                operand={12}//点击左箭头或右箭头一次递增的数值，可以不写，默认为0
                callback={filterByYear}//用于获取最后选择到的值
                defaultValue={moment().format('YYYY')}
            />
        );
 转载：https://www.cnblogs.com/zyl-Tara/p/9133524.html；