AntDesign日期选择框按年份选择

1、在父子div中添加id，在父div中添加点击事件

2、子div使用三元判断的形式是否显隐

3、通过父元素点击事件判断是否点击的在子id区域，不是则隐藏

4、由于我是结合选项Cascader级联选择判断Checkbox多选框是否显隐，隐藏为了避免点完选项直接消失可以再加一个判断，默认为false，选完之后为ture，然后如果点击区域外则把判断显隐的标识为ture的同时在让这个额外的判断为false

（本次以React框架为示例）以下只列出了关键代码，其余部分功能代码省略，只是实现思路，不可直接使用！！！

//state 部分（本次以React框架为示例）
this.state = {
   checkbox: false,//多选框显隐控制参数，默认为false
   show: false,
}
 
//额外，在选项点击触发的onChange里
onChangeCascader = (value) => {
        console.log(value);
this.setState({  checkbox: true, show: true })
}
 
//多选点击触发的onChange里
onChangeCheckbox = (checkedValues) => {
        console.log('checked = ', checkedValues);
this.setState({          
            show: true,
        }
}
 
//getShow点击事件
getShow = () => {
        var e = window.event; //浏览器兼容性
        var elem = e.target;
        while (elem) { //循环判断至跟节点，防止点击的是div子元素
            if (elem.id && elem.id === 'show') {
                return;
            }
            elem = elem.parentNode;
        }
 
        // document.getElementById('show').css('display', 'none'); //点击的不是div或其子元素
        //选项额外的判断，避免误消失
        if (this.state.show) {
            //控制子div隐藏，同时额外的判断再变为false 
            this.setState({ checkbox: false, show: false })
        }
 
    }
 
 
//react中render()部分 使用Antd框架中组件
<div id='box' onClick={this.getShow}>
 <Cascader
 onChange={this.onChangeCascader}
  />
{this.state.checkbox ?
   <div id="show" >
      <CheckboxGroup
        onChange={this.onChangeCheckbox}
      />
  </div>
: ''}
</div>