尝试在不同组件中打开和关闭 Modal答案

【问题标题】：Trying to open and close a Modal in different components尝试在不同组件中打开和关闭 Modal
【发布时间】：2020-09-03 22:12:55
【问题描述】：

我在两个组件之间使用了 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;

非常感谢！

【问题讨论】：

标签： javascript reactjs material-ui react-component

【解决方案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 传递它

【讨论】：

非常感谢！