有什么方法可以控制Popper中嵌套的Material UI选择在DOM中被挂载的位置？

Question

我正试图在Popper中放置一个选择菜单。我遇到的问题是，嵌套的选择菜单希望将它所产生的弹出式菜单挂载在主体上作为邻居，而不是作为popper的子菜单。这就导致了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.iosstrange-bassi-liwdc?file=srcApp.js:0-1013。

Answer 1

1. 如果你需要使用 Select - 就用 TextField，这没有任何意义）。)
2. 你需要确保第二个popper不被渲染成门户（你需要设置 disabledPortal 在...上 MenuProps 的 Select 元素。
3. 你需要告诉新菜单的位置和大小。

---

  <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.iosmui-nested-popper-4uu5l?file=srcApp.js。