javascript - 有没有办法控制弹出器中嵌套的 Material UI 选择在 DOM 中的安装位置？

Question

我正在尝试在 Popper 中放置一个选择菜单。我遇到的问题是嵌套的选择菜单希望将弹出的弹出窗口作为邻居而不是popper的 child 安装在 body 上。这会触发 clickaway 事件。这是重现它的代码:

import React, { useState } from "react";
import "./styles.css";
import Popper from "@material-ui/core/Popper";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";

export default function App() {
  const [popperAnc, setPopperAnc] = useState(null);

  const popperOpen = Boolean(popperAnc);

  return (
    <div className="App">
      <div
        onClick={e => {
          setPopperAnc(e.currentTarget);
        }}
      >
        Popper anchor
      </div>
      <div style={{ position: "absolute" }}>
        <Popper open={popperOpen} anchorEl={popperAnc}>
          <ClickAwayListener
            onClickAway={e => {
              setPopperAnc(null);
            }}
          >
            <TextField select label="Menu">
              <MenuItem value="select1">Select me!</MenuItem>
            </TextField>
          </ClickAwayListener>
        </Popper>
      </div>
    </div>
  );
}

https://codesandbox.io/s/strange-bassi-liwdc?file=/src/App.js:0-1013

Answer 1

如果您需要使用Select - 使用它(不要使用 TextField ，它没有任何意义)。

您需要确保第二个 popper 未呈现为门户(您需要在 disabledPortal 元素的 MenuProps 上设置 Select。

您需要告诉新菜单的位置以及它的大小。

  <div style={{ position: "absolute" }}>
    <Popper open={popperOpen} anchorEl={popperAnc}>
      <ClickAwayListener
        onClickAway={e => {
          console.log("click away");
          setPopperAnc(null);
        }}
      >
        <div>
          <div>Wow</div>
          <Select
            label="Menu"
            MenuProps={{
              disablePortal: true,
              anchorEl: this,
              style: { marginTop: "20px", width: "150px", height: "200px" }
            }}
          >
            <MenuItem value="select1">Select me!</MenuItem>
          </Select>
        </div>
      </ClickAwayListener>
    </Popper>
  </div>

这是一个工作示例: https://codesandbox.io/s/mui-nested-popper-4uu5l?file=/src/App.js