React Material UI - Snackbar 在对话框关闭时关闭，但它不应该关闭

Question

Material ui 对话框会随之关闭snackbar。

这是一个奇怪的问题，所以我创建了一个演示来演示这个问题：

https://codesandbox.io/s/react-hooks-counter-demo-v20w3

我正在将状态从父母传递给孩子，因此父母 state 可以根据孩子进行更新

 <Child openDialog={openDialog} setOpenDialog={setOpenDialog} />

在孩子中，我使用这些如下

export default function Child({openDialog, setOpenDialog}) {

孩子中的按钮应该只关闭对话框，但它也会关闭小吃栏。

  <button 
  onClick={() => dialogClick()}
  >Click this dialog button
  </button>

孩子的第 12 行有setOpenSnack("true"); 这仅在我注释掉第 13 行setOpenDialog(false);时有效

  const dialogClick = (event) => {
    setMsg("This should close dialog only and open the snackbar");
    setOpenSnack(true);
    setOpenDialog(false);
  };

仅当我将其拆分为子项和父项时，才会出现这种行为。

总之，为什么setOpenSnack(true); 在孩子不工作？

Answer 1

将Snackbar移动到父组件，使其不依赖于Dialog的生命周期。

应用程序.js

import DialogBody from "./child";

function App() {
  const [openDialog, setOpenDialog] = useState(false);
  const [openSnack, setOpenSnack] = useState(false);
  const [msg, setMsg] = useState("nothing");

  function doApiCall(formData) {
    // do your API calls here
    console.log(formData);

    // when done hide dialog, show snackbar
    setOpenDialog(false);
    setOpenSnack(true);
  }

  const fireOnClick = (event) => {
    setMsg("you clicked a button");
    setOpenDialog(true);
  };

  const handleCloseSnack = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }

    setOpenSnack(false);
  };

  function Alert(props) {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
  }

  return (
    <div className="App">
      <h3>click button below to open dialog</h3>

      <button onClick={() => fireOnClick()}>Click me</button>

      <Dialog open={openDialog}>
        <DialogTitle>This is a dialog</DialogTitle>
        <DialogBody doApiCall={doApiCall} />
      </Dialog>

      <Snackbar
        open={openSnack}
        autoHideDuration={6000}
        onClose={handleCloseSnack}
      >
        <Alert onClose={handleCloseSnack} severity="error">
          {msg}
        </Alert>
      </Snackbar>
    </div>
  );
}

Child.js

export default function DialogBody({ doApiCall }) {
  const [name, setName] = React.useState("");

  function onChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={onChange} />
      <button onClick={() => doApiCall({ name })}>
        Click this dialog button
      </button>
    </div>
  );
}

我们的DialogBody组件只接受来自父级的名为doApiCall的 prop，通过单击Click this dialog button调用该 prop。

doApiCall可能是对您的后端 API 的异步调用，它在解析时将隐藏对话框并将小吃栏设置为打开。

Answer 2

当对话框关闭时，子组件被拆除。 这证明了小吃的消失是合理的。 试试这个看看：

index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import DialogTitle from "@material-ui/core/DialogTitle";
import Dialog from "@material-ui/core/Dialog";
import Child from "./child";
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";


import "./styles.css";

function App() {
  const [msg, setMsg] = useState("nothing");
  const [openSnack, setOpenSnack] = useState(false);
  const [openDialog, setOpenDialog] = useState(false);
  //Close snackbar except when clickaway

  const fireOnClick = (event) => {
    setMsg("you clicked a button");
    setOpenDialog(true);
    //setOpenSnack(true);
  };

  const snackState = (value) => {
          setOpenSnack(value)
  }

  const snackMessage = (value) => {
    setMsg(value)
}

  const handleCloseSnack = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setOpenSnack(false);
  };

  function Alert(props) {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
  }

  const closeDialogOnly = (event) => {
    setMsg("you closed dialog only");
    setOpenDialog(false);
  };

  return (
    <div className="App">
      <h3>click button below to open dialog</h3>

      <button onClick={() => fireOnClick()}>Click me</button>

      <Dialog onClose={closeDialogOnly} open={openDialog}>
        <DialogTitle>This is a dialog</DialogTitle>
        <Child snackbarStat={snackState} snackMessage={snackMessage} setOpenDialog={setOpenDialog} />
      </Dialog>

      <Snackbar
        open={openSnack}
        autoHideDuration={6000}
        onClose={handleCloseSnack}
      >
        <Alert onClose={handleCloseSnack} severity="error">
          {msg}
        </Alert>
      </Snackbar>
    </div>
  );
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

child.js

    import React from "react";


export default function Child({ snackbarStat, setOpenDialog, snackMessage }) {

  const dialogClick = (event) => {
    snackMessage("snackMessage")
    snackbarStat(true);
    setOpenDialog(false);
  };


  return (
    <div className="child">
      <button onClick={() => dialogClick()}>Click this dialog button</button>

      <p>
        {" "}
        Clicking the button should close dialog but why is it closing the
        snackbar also? <br />
        The snack bar opens for one second and disappears.
        <br />
        setOpenSnack("true") lines is useless when dialog is false.
      </p>

      
    </div>
  );
}

Answer 3

您必须将Snackbar放置在父组件中，因为将其放置在子组件中时，只要卸载子组件，它就会消失

此外，如果你想设置消息，只需将setMsg传递给子组件并完成工作

export default function Child({
  openDialog,
  setOpenDialog,
  setMsg,
  setOpenSnack
}) {
  const dialogClick = (event) => {
    setMsg("you closed from CHILD");
    setOpenSnack(true);
    setOpenDialog(false);
  };

  return (
    <div className="child">
      <button onClick={() => dialogClick()}>Click this dialog button</button>
      <p>
        ...
      </p>
    </div>
  );
}