从 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() {

  const dispatch = useDispatch();

  const [selectedUser, setSelectedUser] = React.useState({});

  const [open, setDialogOpen] = React.useState(false);

  const handleOnDelete = user => {

    setSelectedUser(user);

    setDialogOpen(true);

  };

  const handleOnAgree = () => {

    // do action to handle on agree deleting an user

    dispatch(deleteUser({ title: "Delete User", details: selectedUser }));

    setDialogOpen(false);

  };

  return (

    <div>

      <Paper>

        <TableContainer>

          <Table stickyHeader aria-label="sticky table">

            <TableHead>

              <TableRow>

                <TableCell>First Name</TableCell>

                <TableCell>Last Name</TableCell>

                <TableCell>Email Address</TableCell>

                <TableCell>Actions</TableCell>

                <TableCell />

              </TableRow>

            </TableHead>

            <TableBody>

              <TableRow>

                <TableCell>JJJ</TableCell>

                <TableCell>BBB</TableCell>

                <TableCell>enfoie</TableCell>

                <TableCell>

                  <Button variant="contained">Edit</Button>

                  <Button

                    variant="contained"

                    onClick={() => handleOnDelete({ id: 1, name: "JJJ" })}

                  >

                    Delete

                  </Button>

                </TableCell>

              </TableRow>

            </TableBody>

          </Table>

        </TableContainer>

      </Paper>

      <DeleteDialog

        user={selectedUser}

        open={open}

        onAgree={handleOnAgree}

        onDisagree={() => setDialogOpen(false)}

      />

    </div>

  );

}

在：dialog.js

import 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) {

  return <Slide direction="up" ref={ref} {...props} />;

});

const DeleteDialog = ({ user, open, onAgree, onDisagree }) => {

  return (

    <div>

      <Dialog

        open={open}

        TransitionComponent={Transition}

        keepMounted

        onClose={onDisagree}

        aria-labelledby="alert-dialog-slide-title"

        aria-describedby="alert-dialog-slide-description"

      >

        <DialogTitle id="alert-dialog-slide-title">

          <span style={{ fontWeight: "bold" }}>

            {" "}

            User: {user.name} - {user.id}

          </span>

        </DialogTitle>

        <DialogActions>

          <Button variant="contained" size="small" onClick={onDisagree}>

            Cancel

          </Button>

          <Button variant="contained" size="small" onClick={onAgree}>

            Confirm

          </Button>

        </DialogActions>

      </Dialog>

    </div>

  );

};

export default DeleteDialog;