将两个函数放在同一个 "onclick"

Question

我正在尝试在 table 中显示一组用户，我正在使用一个名为“ReactTable”的库，当用户点击“批准”按钮应该发生两件事：

第一个将是 approveUser 函数的调度

第二件事，会出现“验收已完成”的信息。

问题是我想将两个功能放在同一个按钮和同一个“onClick”中，当我这样做时网站不再工作，

我该如何解决这个问题？

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

const useStyles = makeStyles({
  button1: {
    backgroundColor: "none",
    "&:hover": {
      backgroundColor: "#43a047",
      color: "#e8e4e4",
      transition: "0.3s",
      borderColor: "#43a047",
    },
  },
  button2: {
    backgroundColor: "none",
    "&:hover": {
      backgroundColor: "#e53935",
      color: "#e8e4e4",
      transition: "0.3s",
      borderColor: "#e53935",
    },
  },
});

function ContactsList(props) {
  const classes = useStyles();
  const dispatch = useDispatch();
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(true);
  };

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

    setOpen(false);
  };

  useEffect(() => {
    dispatch(getUsersRequests());
  }, [dispatch]);

  const usersRequestsState = useSelector(
    (state) => state.usersRequestsApp["usersRequests"]
  );

  console.log(
    "requests inside Contacts List: ",
    usersRequestsState["usersRequests"]
  );

  const columns = useMemo(
    () => [
      {
        Header: "",
        // this is function or property
        accessor: "avatar",
        Cell: ({ row }) => {
          return (
            <Avatar
              className="mx-8"
              alt={row.original.name}
              src={row.original.avatar}
              style={{ height: "7rem", width: "7rem" }}
            />
          );
        },
        className: "justify-center",
        width: 64,
        sortable: false,
      },
      {
        Header: "First Name",
        accessor: "firstName",
        className: "font-medium",
        sortable: true,
      },
      {
        Header: "Last Name",
        accessor: "lastName",
        className: "font-medium",
        sortable: true,
      },
      {
        Header: "Email",
        accessor: "email",
        sortable: true,
      },
      {
        Header: "Phone Number",
        accessor: "phoneNumber",
        sortable: true,
      },
      {
        Header: "actions",
        accessor: "",
        sortable: true,
        id: "action",
        // width: 100,
        Cell: ({ row }) => (
          <div className="flex items-center">
            <ButtonGroup
              style={{
                maxWidth: "206px",
                maxHeight: "40px",
                minWidth: "206px",
                minHeight: "40px",
              }}
              aria-label="outlined primary button group"
            >
              <Button
                style={{
                  maxWidth: "100px",
                  minWidth: "100px",
                }}
                onClick={(ev) => {
                  ev.stopPropagation();
                  handleClick;
                  dispatch(approveUser(row.original.id));
                }}
                className={classes.button1}
              >
                approve
              </Button>

              <Snackbar
                open={open}
                autoHideDuration={6000}
                onClose={handleClose}
              >
                <Alert onClose={handleClose} severity="success">
                  acceptance has been completed!
                </Alert>
              </Snackbar>

              <Button
                style={{
                  maxWidth: "100px",
                  minWidth: "100px",
                }}
                onClick={(ev) => {
                  ev.stopPropagation();
                  dispatch(rejectUser(row.original.id));
                }}
                className={classes.button2}
              >
                reject
              </Button>
            </ButtonGroup>
          </div>
        ),
      },
    ],
    []
  );

  const dataResponse = useMemo(() => usersRequestsState["data"]);

  console.log("dataResponse: ", dataResponse);

  return (
    <motion.div
      initial={{ y: 20, opacity: 0 }}
      animate={{ y: 0, opacity: 1, transition: { delay: 0.2 } }}
    >
      <ContactsTable columns={columns} data={dataResponse} />
    </motion.div>
  );
}

export default ContactsList;

Answer 1

调用函数时需要使用()

   onClick={(ev) => {
                  ev.stopPropagation();
                  handleClick();
                  dispatch(approveUser(row.original.id));
                }}

Answer 2

只放一个函数引用而不使用它是没有用的

onClick={(ev) => {
                  ev.stopPropagation();
                  handleClick;
                  dispatch(approveUser(row.original.id));
                }}

您应该通过将 () 放在 handleClick 的末尾来调用该函数，如：

onClick={(ev) => {
                  ev.stopPropagation();
                  handleClick(ev);    // INVOCATION
                  dispatch(approveUser(row.original.id));
                }}

这只是个人喜好

您正在内联处理 onClick 并尝试调用函数 handleClick，因此如果您可以在处理程序中设置 Open 的状态会更清晰。

setOpen(true);

下面的代码更具可读性

onClick={(ev) => {
  ev.stopPropagation();
  setOpen(true);   
  dispatch(approveUser(row.original.id));
}}

将两个函数放在同一个 "onclick"

Putting two functions in the same "onclick"

reactjs

redux-toolkit

react-table