Reactjs 反应日期选择器隐藏在溢出父项后面（popover固定放置问题）

我正在尝试从材质UI菜单项打开react datepicker的日期选择弹出框

我已将菜单项设置为react datepicker输入字段。问题是我的输入字段是选择日期弹出框的锚点，弹出框在我的菜单中打开。我想要打开菜单上方的popover

react datepicker文档中没有很多关于popover放置的信息。你知道怎么做到吗

快速浏览我的菜单代码：

// 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}）=>{
//引用日期选择器以控制打开/关闭
const calendar=createRef（）；
//打开日期选择器
常量openDatepicker=（e）=>{
calendar.current.setOpen（true）；
};
//关闭日期选择器
const closeDatepicker=（e）=>{
calendar.current.setOpen（false）；
};
const RescheduleButton=（{onClick}）=>{
返回(
{
onClick（）；
}}
>
重新安排
);
};
返回(
{
handleReschedule（日期）；
}}
ref={calendar}
minDate={subDays（new Date（），0）}
customInput={}
提升阀位置=“底端”
/>
);
};

---

提前感谢

截至本文撰写之时，此道具没有文档记录，但您可以使用

popperProps

来配置popper属性-它们使用。在您的情况下，请使用

positionFixed:true

，使其相对于视口的初始包含块（即

）

---

您能否在中重新创建此问题？在codesandbox中重新创建：

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"
    />
  );
};

<DatePicker
  popperProps={{
    positionFixed: true // use this to make the popper position: fixed
  }}
/>