Material-UI Dialog Reusable Component Not Working 但控制台中没有错误，应用程序不会崩溃

Question

这是我的可重用组件：

import {
  Dialog,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Divider,
  Button,
  DialogActions,
} from "@mui/material";

const Modal = ({ title, subtitle, children, isOpen, handleClose }) => {
  return (
    <Dialog open={isOpen} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <DialogContentText>{subtitle}</DialogContentText>
        <Divider />
        {children}
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="error">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default Modal;

我在这里使用它的父组件：

const [isOpen, setisOpen] = useState(false);
  const [isOpenDialog, setIsOpenDialog] = useState(false);

  const handleDialogOpen = () => {
    setisOpen(true);
  };

  const handleDialogClose = () => {
    setisOpen(false);
  };

  const handleOpen = () => {
    setIsOpenDialog(true);
  };

  const handleClose = () => {
    setIsOpenDialog(false);
  };

 <Modal
        title="confirmation"
        isOpen={isOpen}
        children={sample}
        handleClose={handleDialogClose}
      />


         <Button
              color="error"
              onClick={
                () => handleDialogOpen}
            >
              Delete
            </Button>

它不会在控制台中显示任何错误，应用程序也不会崩溃。 我怎样才能解决这个问题？ 另外，我如何添加一个按钮，用户可以在其中说“ yes ”，因为目前模态只有一个按钮可以close它

Answer 1

这里有很多东西要打开。 这是一个解决方案：

import {
 Dialog,
 DialogContent,
 DialogContentText,
 DialogTitle,
 Divider,
 Button,
 DialogActions
} from "@mui/material";

const Modal = ({ title, subtitle, children, isOpen, handleClose }) => {
const handleConfirm = () => {
  alert("You Agreed!");
  handleClose();
};
 return (
   <Dialog open={isOpen} onClose={handleClose}>
    <DialogTitle>{title}</DialogTitle>
     <DialogContent>
      <DialogContentText>{subtitle}</DialogContentText>
       <Divider />
        {children}
       </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="error">
          Cancel
        </Button>
        <Button onClick={handleConfirm} color="primary">
          Agree
        </Button>
      </DialogActions>
   </Dialog>
  );
};

export default Modal;

这是父母：

import Modal from "./modal";
import { useState } from "react";
import { Button } from "@mui/material";

export default function App() {
 const [isOpen, setisOpen] = useState(false);

 const handleOpen = () => {
  setisOpen(true);
 };

 const handleClose = () => {
  setisOpen(false);
 };
   return (
     <div className="App">
     <Modal title="confirmation" isOpen={isOpen} handleClose={handleClose} />
     <Button color="primary" onClick={handleOpen}>
       I Agree
     </Button>
    </div>
 );
}

这是沙箱：