如何使用react和materialUI从另一个模块控制对话框

问题描述

我正在尝试借助按钮从另一个react组件打开materialUI对话框组件。想要的结果是，每当我单击按钮时，它就会打开对话框。 当前结果是它仅在我单击按钮时每隔第二次打开。

你们当中有人知道为什么会这样吗？我必须使用useeffect（）挂钩吗？

这是带有按钮的父组件的代码段：

const [showModal,setShowModal] = useState(false);

const saveButtonHandler1 = async () => {
    function showModalHandler() {
      setShowModal(!showModal);
      .... some other code.....
    }}

这是子对话框组件的代码片段：

export default function MaxWidthDialog(props) {
  useEffect(() => {
    handleClickopen();
  },[]);

  const classes = useStyles();
  const [open,setopen] = React.useState(false);
  const [fullWidth,setFullWidth] = React.useState(true);
  const [maxWidth] = React.useState("sm");

  const handleClickOpen = () => {
    setopen(true);
    setTimeout(() => setopen(false),16000);
  };

  const handleClose = () => {
    setopen(false);
    
  };

  /* const handleMaxWidthChange = event => {
    setMaxWidth(event.target.value);
  }; */

  const handleFullWidthChange = (event) => {
    setFullWidth(event.target.checked);
  };
 


  return (
    <React.Fragment>
      <Dialog
        fullWidth={fullWidth}
        maxWidth={maxWidth}
        open={open}
        onClose={handleClose}
        aria-labelledby="max-width-dialog-title"
      >
        <DialogTitle id="max-width-dialog-title"></DialogTitle>
        <DialogContent>
          <DialogContentText>
            <CanvasLoading />
          </DialogContentText>
        </DialogContent>
        <DialogActions></DialogActions>
      </Dialog>
    </React.Fragment>
  );
}

解决方法

你说的你好@Rainer我理解这一点：

• 有一个带有按钮的父项，该对话框每次单击都会打开
• 有一个带有对话框的孩子

这是一个我用您的一些代码和一些修改创建的沙箱，可以从https://codesandbox.io/s/ecstatic-shamir-1ffso?file=/src/App.js开始

PS：不需要使用UseEffect

,

如果您有父级组件，则可以使用props和回调函数共享此数据，如果您在父级组件内部的组件之间使用它，则可以使用它。

但是，如果您的组件没有这种关系，我认为在没有父组件的情况下在两个组件之间共享信息的最佳方法是使用Redux。