如何解决React Date Picker隐藏在父级溢出之后弹出式固定放置问题
我正在尝试使反应日期选择器中的日期选择弹出窗口从材质UI菜单项中打开。
我已将菜单项设置为react datepicker输入字段。问题是我的输入字段是选择日期弹出框的锚点,并且弹出框在菜单中打开。我希望弹出菜单在菜单上方打开。
react datepicker文档没有有关弹出窗口放置的很多信息。知道如何实现吗?
here is a screenshot of the unwanted behavior with the popover being "trapped" in the menu
我的菜单代码快速概述:
// this icon is the anchor for the menu
<MoreIcon onClick={handleClick} />
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
//this is my Date picker component
<Reschedule handleReschedule={handleReschedule} />
</Menu>
和我的日期选择器组件(带有自定义输入字段作为菜单项):
export const Reschedule = ({ handleReschedule }) => {
// ref to the datePicker to control open/close
const calendar = createRef();
//to Open the date picker
const openDatepicker = (e) => {
calendar.current.setOpen(true);
};
//to close the date picker
const closeDatepicker = (e) => {
calendar.current.setOpen(false);
};
const RescheduleButton = ({ onClick }) => {
return (
<MenuItem
className="overdue__rescheduleButton"
onClick={() => {
onClick();
}}
>
Reschedule
</MenuItem>
);
};
return (
<DatePicker
selected={null}
onChange={(date) => {
handleReschedule(date);
}}
ref={calendar}
minDate={subDays(new Date(),0)}
customInput={<RescheduleButton onClick={openDatepicker} />}
popperPlacement="bottom-end"
/>
);
};
预先感谢
解决方法
在撰写本文时,该道具尚未记录,但是您可以使用popperProps
来配置popper属性-他们使用Popper.js。在您的情况下,请使用positionFixed: true
,使其相对于视口的初始包含块(即<html>
)
<DatePicker
popperProps={{
positionFixed: true // use this to make the popper position: fixed
}}
/>
https://github.com/Hacker0x01/react-datepicker/blob/master/src/popper_component.jsx
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。