Tengo una implementación de tabla de datos de la siguiente manera.
<MaterialTable icons={tableIcons} title={title} columns={columns} data={data} actions={[ { icon: () => <Edit />, tooltip: 'Edit', onClick: (event, rowData) => { } }, { icon: () => <Delete />, tooltip: 'Delete', onClick: (event, rowData) => { return <DeletePrompt button_click="1" /> // <-- this is where I need to call the modal } } ]} options={{ actionsColumnIndex: -1, exportButton: true, headerStyle: { fontWeight: "bold" } }} />Sin embargo, necesito hacer uso del siguiente modal para implementar acciones de eliminación.
DeletePrompt.jsx
export default function DeletePrompt(props) { const content = props.content; const data_id = props.data_id; const [open, setOpen] = React.useState(false); const handleClickOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; if(props.button_click === 1){ handleClickOpen() } return ( <div> <Dialog open={open} onClose={handleClose} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" > <DialogTitle id="alert-dialog-title"> {"Are you sure to Delete?"} </DialogTitle> <DialogContent> <DialogContentText id="alert-dialog-description"> { content } </DialogContentText> </DialogContent> <DialogActions> <Button onClick={handleClose}>Cancel</Button> <Button onClick={handleClose} autoFocus> Delete </Button> </DialogActions> </Dialog> </div> ); } Sé que invocar el método handleClickOpen() habría funcionado en este caso. Pero por alguna razón no parece funcionar. Cualquier conjetura sobre lo que me estoy perdiendo aquí.
En lugar de representar el modal en el botón, haga clic en el método onClick del icono Delete , debe configurar un cuadro de diálogo booleano y también una variable de estado para contener los datos de la fila seleccionada.
const [open, setOpen] = React.useState(false); const [selectedItem, setSelectedItem] = React.useState({}); en su onClick , puede actualizar el código a continuación para activar el indicador booleano para el modal y también almacenar los datos de la fila en el estado del selectedItem para usar en el modal de eliminación.
... { icon: () => <Delete />, tooltip: 'Delete', onClick: (event, rowData) => { setSelectedItem(rowData) setOpen(true) } } ... De lo que puede renderizar condicionalmente el deletePrompt en el mismo componente usando el accesorio open
{open ? <DeletePrompt open={open} handleClose(() => { // reset on close setOpen(false) setSelectedItem({}) }) content={selectedItem} .... // other props /> : null} Finalmente, actualice su componente DeletePrompt para eliminar el open state desde allí y use los accesorios.
export default function DeletePrompt(props) { const { content, open, handleClose } = props; // assignment const data_id = props.data_id; // const [open, setOpen] = React.useState(false); // const handleClickOpen = () => { // setOpen(true); // }; // const handleClose = () => { // setOpen(false); // }; // if(props.button_click === 1){ // handleClickOpen() // } return ( <div> <Dialog open={open} onClose={handleClose} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" > <DialogTitle id="alert-dialog-title"> {"Are you sure to Delete?"} </DialogTitle> <DialogContent> <DialogContentText id="alert-dialog-description"> { content } // make sure, this is not an object. If its an object use some property of it. </DialogContentText> </DialogContent> <DialogActions> <Button onClick={handleClose}>Cancel</Button> <Button onClick={handleClose} autoFocus> Delete </Button> </DialogActions> </Dialog> </div> ); }