尝试打开和关闭不同组件中的模态

我在两个组件之间使用了材质UI对话框表单。在作为Productos.js的父组件中,我打开了该组件,子组件EditarProductos.js从其父组件接收了打开状态。

我遇到了麻烦,因为我只能打开一次对话框,然后无法再次打开它。

以下是Productos.js(父组件)中的代码


//Code...

import EditarProductos from './EditarProductos';

//Code...

function Productos(props) {

const [open, setOpen] = React.useState(false);

//Code...

function editar(producto){

//Code...

setOpen(true);

}

//Code...

return (

<div>

{id && nombre && precioCompra && precioVenta && cantidad && open &&

<EditarProductos productoEdit={id} productoNombre={nombre} productoPrecioCompra ={precioCompra}

productoPrecioVenta = {precioVenta} productoCantidad = {cantidad} isOpen = {open}/>

}

<br />

//Code...

<br />

<Table className={classes.table}>

<TableHead>

<TableRow>

//Code...

</TableRow>

</TableHead>

<TableBody>

{productos.map((producto) =>

<TableRow className="data-row">

<StyledTableCell>{producto.id
}</StyledTableCell>

<StyledTableCell>{producto.nombre}</StyledTableCell>

<StyledTableCell>{producto.precio_compra}</StyledTableCell>

<StyledTableCell>{producto.precio_venta}</StyledTableCell>

<StyledTableCell>{producto.cantidad}</StyledTableCell>

<StyledTableCell>{producto.categorias_id}</StyledTableCell>

<StyledTableCell>

<Button variant="outlined" onClick={() => editar(producto)}>

<EditIcon />

</Button>

<Button variant="outlined" onClick={() => eliminar(producto)} ><DeleteIcon /> </Button>

</StyledTableCell>

</TableRow>

)}

</TableBody>

</Table>

</div>

);

}

export default Productos;

以下是EditarProdutos.js(子组件)


import {Button, TextField, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from '@material-ui/core';

function EditarProductos(props){

var abierto = props.isOpen;

const [open, setOpen] = React.useState(abierto);

const handleClose = () => {

abierto = false;

};

//Code...

return (

<div>

<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">

<DialogTitle id="form-dialog-title">Editar</DialogTitle>

//Code...

<Button onClick={handleClose} color="primary">

Cancelar

</Button>

//Code...

</DialogActions>

</Dialog>

</div>

);

}

export default EditarProductos;

非常感谢!

评论