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

我正在两个组件之间使用材质UI对话框窗体。在父组件Productos.js中，我打开该组件，子组件EditarProductos.js从其父组件接收打开状态

我遇到了问题，因为我只能打开对话框一次，然后就不能再打开它了

下面是Productos.js（父组件）的代码

//代码。。。
从“/EditarProductos”导入EditarProductos；
//代码。。。
功能产品（道具）{
const[open，setOpen]=React.useState（false）；
//代码。。。
函数编辑器（producto）{
//代码。。。
setOpen（真）；
}
//代码。。。
返回(
{id&&nombre&&precioCompra&&precioVenta&&cantidad&&open&&
}


//代码。。。


//代码。。。
{productos.map（（producto）=>
{producto.id
}
{producto.nombre}
{producto.precio_compra}
{producto.precio_venta}
{producto.cantidad}
{producto.categorias_id}
编辑（产品）}>
eliminar（producto）}>
)}
);
}
导出默认产品；

下面是EditarProdutos.js（子组件）

从“@material ui/core”导入{Button，TextField，Dialog，DialogActions，DialogContent，DialogContentText，DialogTitle}；
函数编辑器产品（道具）{
var abierto=props.isOpen；
const[open，setOpen]=React.useState（abierto）；
常量handleClose=（）=>{
阿比尔托=假；
};
//代码。。。
返回(
编辑
//代码。。。
取消者
//代码。。。
);
}
导出默认EditarProductos；

---

非常感谢你

代码的问题是

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;

函数编辑器产品（道具）{
返回(
编辑
取消者
);
}
导出默认EditarProductos；

---

在您的

Productos

组件中，您还需要定义一个

handleClose

方法（使用

setOpen（false）

），您还需要使用

isOpen

传递该方法，非常感谢！

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;

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;