从 React 中的其他页面打开对话框

Question

当我单击用户列表中的“删除”功能按钮时，我正在打开一个对话框组件。当我单击它时，应该显示对话框组件。我的问题是为什么我不能打开它。我正在使用 redux 将数据传递给它。

请看这个代码和框链接

点击这里

import { dialogConstants } from "../constants";

export const initialState = {

  title: null,

  details: null,

  isOpen: null

};

const dialogReducer = (state = initialState, action) => {

  console.log(action.payload);

  switch (action.type) {

    case dialogConstants.SET_DIALOG_DETAILS:

      return {

        ...state,

        isOpen: action.payload.isOpen,

        title: action.payload.title,

        details: action.payload.details

      };

    default:

      return state;

  }

};

export default dialogReducer;

Answer 1

您没有在 中导入 。因此，当您单击按钮时，对话框将不会打开。试试这个： 在 ：Dialogsuser.jsuser.js...import DeleteDialog from "./dialog";import { useDispatch } from "react-redux";import { deleteUser } from "./actions";export default function User() {&nbsp; const dispatch = useDispatch();&nbsp; const [selectedUser, setSelectedUser] = React.useState({});&nbsp; const [open, setDialogOpen] = React.useState(false);&nbsp; const handleOnDelete = user => {&nbsp; &nbsp; setSelectedUser(user);&nbsp; &nbsp; setDialogOpen(true);&nbsp; };&nbsp; const handleOnAgree = () => {&nbsp; &nbsp; // do action to handle on agree deleting an user&nbsp; &nbsp; dispatch(deleteUser({ title: "Delete User", details: selectedUser }));&nbsp; &nbsp; setDialogOpen(false);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <Paper>&nbsp; &nbsp; &nbsp; &nbsp; <TableContainer>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Table stickyHeader aria-label="sticky table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableHead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>First Name</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>Last Name</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>Email Address</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>Actions</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableHead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>JJJ</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>BBB</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>enfoie</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button variant="contained">Edit</Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="contained"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => handleOnDelete({ id: 1, name: "JJJ" })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Delete&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Table>&nbsp; &nbsp; &nbsp; &nbsp; </TableContainer>&nbsp; &nbsp; &nbsp; </Paper>&nbsp; &nbsp; &nbsp; <DeleteDialog&nbsp; &nbsp; &nbsp; &nbsp; user={selectedUser}&nbsp; &nbsp; &nbsp; &nbsp; open={open}&nbsp; &nbsp; &nbsp; &nbsp; onAgree={handleOnAgree}&nbsp; &nbsp; &nbsp; &nbsp; onDisagree={() => setDialogOpen(false)}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </div>&nbsp; );}在：dialog.jsimport React from "react";import Button from "@material-ui/core/Button";import Dialog from "@material-ui/core/Dialog";import DialogActions from "@material-ui/core/DialogActions";import DialogTitle from "@material-ui/core/DialogTitle";import Slide from "@material-ui/core/Slide";const Transition = React.forwardRef(function Transition(props, ref) {&nbsp; return <Slide direction="up" ref={ref} {...props} />;});const DeleteDialog = ({ user, open, onAgree, onDisagree }) => {&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <Dialog&nbsp; &nbsp; &nbsp; &nbsp; open={open}&nbsp; &nbsp; &nbsp; &nbsp; TransitionComponent={Transition}&nbsp; &nbsp; &nbsp; &nbsp; keepMounted&nbsp; &nbsp; &nbsp; &nbsp; onClose={onDisagree}&nbsp; &nbsp; &nbsp; &nbsp; aria-labelledby="alert-dialog-slide-title"&nbsp; &nbsp; &nbsp; &nbsp; aria-describedby="alert-dialog-slide-description"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <DialogTitle id="alert-dialog-slide-title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style={{ fontWeight: "bold" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {" "}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; User: {user.name} - {user.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; </DialogTitle>&nbsp; &nbsp; &nbsp; &nbsp; <DialogActions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button variant="contained" size="small" onClick={onDisagree}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Cancel&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button variant="contained" size="small" onClick={onAgree}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Confirm&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; </DialogActions>&nbsp; &nbsp; &nbsp; </Dialog>&nbsp; &nbsp; </div>&nbsp; );};export default DeleteDialog;