有没有办法控制 popper 中嵌套的 Material UI 选择在 DOM 中安装的位置？

Question

我正在尝试在 Popper 中放置一个选择菜单。我遇到的问题是，嵌套选择菜单想要将弹出菜单作为邻居而不是 popper 的子项安装在主体上。这会导致点击事件触发。这是重现它的代码：

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

1. 如果您需要使用Select- 就使用它（不要使用TextField，它没有任何意义）。
2. 您需要确保第二个弹出窗口不会呈现为门户（您需要在元素的disabledPortal上进行设置）。MenuPropsSelect
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.io/s/mui-nested-popper-4uu5l ?file=/src/App.js