试图在不同的组件中打开和关闭一个模式。

Question

我在两个组件之间使用一个Material UI Dialog Form。在父组件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;

非常感谢您！我在两个组件之间使用了一个Material UI Dialog Form。

Answer 1

你的代码的问题在于内部状态，即 EditarProductos 组件持有。

对于这个问题，最简单的解决方法是，你把你的 isOpen 旗帜和 handleClose 方法的父级方法，该 EditarProductos 不会有内部状态，只是使用道具。

function EditarProductos(props){
  return (
    <div>
      <Dialog open={props.isOpen} onClose={props.handleClose}>
        <DialogTitle>Editar</DialogTitle>

        <DialogActions>
          <Button onClick={props.handleClose} color="primary">
           Cancelar
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default EditarProductos;

而在你的 Productos 组件，您需要定义一个 handleClose 方法也是（与 setOpen(false))，你也需要用传承。isOpen