React在Table组件中使用DatePicker组件

需求： 在一个table组件中使用DatePicker组件编辑当前条信息其中里面包含了时间，在我直接用的时发现如图二所示的情况

需求图

image.png
这个时候只能通过下滑的方式实现选中你想要的日期，我首先想到的是层级的起因造成的于是我审查元素一级一级的查找之后发现在table自带的样式中有overflow-x: scroll;这个属性而且overflow-x和overflow-y不能同时作用，具体起因可查看相关文档，在理解到不能改变css样式实现之后我决定改变时间弹出框的位置实现而后在antd文档中找到getCalendarContainer属性，其说明是当不满足当前位置时可以通过该属性进行更换显示的位置，getPopupContainer={()=>document.getElementById('Select')}, select是你想要显示位置的id也可以通过class来定义，当然用id最好，这里提议用id,废话不多说上代码

                <DatePicker                  placeholder='请选择时间'                  showTime={{ format: 'HH:mm' }}                  format="YYYY-MM-DD HH:mm"                  getCalendarContainer={() =>                     document.getElementById('test')                  }                />)}

而后在你想要显示的地方增加id='test'就可最终的效果图是

完美告终
再见~~~~~~~