如何使用 react 和 materialUI 控制来自另一个模块的对话框答案

【问题标题】：How can I control a dialog from another module with react and materialUI如何使用 react 和 materialUI 控制来自另一个模块的对话框
【发布时间】：2020-12-20 17:20:26
【问题描述】：

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

你们中有人知道为什么会发生这种情况吗？我必须使用 useeffect() Hook 吗？

这是带有按钮的父组件的代码sn-p：

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

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

这是子对话框组件的代码sn-p：

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>
  );
}

【问题讨论】：

标签： reactjs modal-dialog material-ui react-component

【解决方案1】：

你好@Rainer 从你说的我明白这一点：

有一个父级，每次点击时都有一个按钮来打开对话框
对话中有一个孩子

这是我用你的一些代码和我做的一些修改创建的沙箱，你可以从这里开始：

import React, { useState } from "react";
import "./styles.css";
import MaxWidthDialog from "./Child";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {/*
      this is the child component with props to 
      get the status of dialog and to handle close the dialog
      */}
      <MaxWidthDialog
        isDialogOpened={isOpen}
        handleCloseDialog={() => setIsOpen(false)}
      />
      <button onClick={() => handleOpen()}>Open Dialog</button>
    </div>
  );
}

https://codesandbox.io/s/ecstatic-shamir-1ffso?file=/src/App.js

PS：不需要使用UseEffect

【讨论】：

非常感谢您的沙盒。我终于明白了如何在这个设置中使用道具。太棒了:)！

【解决方案2】：

如果你有一个父组件，你可以使用 props 和回调来共享这些数据，如果你在父组件中的组件之间有它，它就可以工作。

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

【讨论】：