如何使用 React 和 Material UI 控制来自另一个模块的对话框

Question

我正在尝试借助按钮从另一个 React 组件打开一个 materialUI 对话框组件。想要的结果是每次我单击按钮时它都会打开对话框。目前的结果是，它只会在我点击按钮时每隔一秒打开一次。

你们中有人知道为什么会这样吗？我必须使用 useeffect() Hook 吗？

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

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

Answer 1

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

有一个 parent 带有一个按钮，每次单击它都会打开对话框
对话框

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

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

Answer 2

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

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

如何使用 React 和 Material UI 控制来自另一个模块的对话框

How can I control a dialog from another module with react and materialUI

modal-dialog

reactjs

material-ui

react-component