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

Question

当我单击用户列表上的DELETE功能按钮时，我正在打开一个对话框组件。当我单击它时，应该显示对话框组件。我的问题是为什么我无法打开它。我正在使用 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;

标签： javascriptreactjsreduxreact-reduxreact-hooks

Answer 1

您没有导入Dialogs. user.js因此，当您单击按钮时，您的对话框将不会打开。试试这个user.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;