0
416
VistasEl componente reutilizable del cuadro de diálogo Material-UI no funciona, pero no hay ningún error en la consola y la aplicación no falla
Este es mi componente reutilizable:
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;Componente principal donde uso esto aquí:
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> No muestra ningún error en la consola y la aplicación no falla. ¿Cómo puedo arreglar esto? Además, ¿cómo puedo agregar un botón donde el usuario pueda decir que yes , ya que en este momento el modal solo tiene un botón para close ?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Hay mucho que desempacar aquí. Aquí hay una solución:
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;Aquí está el padre:
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> ); }Aquí está la caja de arena:
·
Juan Pablo Isaza
Denunciar
Responde la pregunta