（MUI v5）（嵌套模态）父模态和子模态同时死亡

Question

我已经在 codesandbox 中模拟了我的问题：https://codesandbox.io/s/trusting-babbage-ovj2we?file=/src/App.js

我创建了一个嵌套模式，当父模式打开时，有一个按钮指向子模式。我已经将父模态的 useState 作为道具传递给子模态，我想在打开子模态时关闭父模态，但是，当单击按钮时两者都死了。

我已经多次检查我的代码，但不知道是什么原因造成的。

Answer 1

你不能这样做，如果父模态死亡，子模态也会死亡，但你可以通过不将子模态包裹在父模态中来做到这一点，请参见下面的工作代码来解决你的问题

import * as React from "react";
import Box from "@mui/material/Box";
import Modal from "@mui/material/Modal";
import Button from "@mui/material/Button";

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper",
  border: "2px solid #000",
  boxShadow: 24,
  pt: 2,
  px: 4,
  pb: 3
};


export default function NestedModal() {
  const [open, setOpen] = React.useState(false);
  const [openChild, setChildOpen] = React.useState(false);
  const toggleOpenParent = () => {
    setOpen(!open);
  };
  const toggleChild = () => {
    setChildOpen(!openChild);
  };

  return (
    <div>
      <Button onClick={toggleOpenParent}>Open modal</Button>
      <Modal open={open} onClose={toggleOpenParent}>
        <Box sx={{ ...style, width: 400 }}>
        <Button
        onClick={() => {
          toggleChild();
          toggleOpenParent()
        }}
      >
        Open Child Modal
      </Button>
        </Box>
      </Modal>
       <React.Fragment>
      
       <Modal hideBackdrop open={openChild} onClose={toggleChild}>
        <Box sx={{ ...style, width: 200 }}>
          <Button onClick={toggleChild}>Close Child Modal</Button>
        </Box>
      </Modal>
    </React.Fragment>
    </div>
  );
}

（MUI v5）（嵌套模态）父模态和子模态同时死亡

(MUI v5) (Nested Modal) Both parent and child modal die at the same time

javascript

frontend

reactjs

material-ui

use-state