Javascript 为什么我的调度不适用于按钮单击事件？

我使用ReactJS构建了一个Trello克隆，其中有4个列，分别称为TODO、DOING、DONE和REJECTED，我可以在任何列中添加一张卡片

在一个文件中，我试图映射卡组件并从定义的虚拟数据渲染属性

我想做什么

• 我想在单击按钮时删除特定的卡

我试过什么

• 我已经在我的Redux存储中添加了该功能，但是在将onclick事件添加到我的按钮时，我无法访问将触发deleteCard功能的dispatch方法

我该怎么做

My TaskboardList.js组件：

import React from "react";
import TaskboardCard from "./TaskboardCard";
import TaskboardActionButton from "./TaskboardActionButton";
import { Droppable } from "react-beautiful-dnd";

const TaskboardList = ({ title, cards, listID }) => {
  return (
    <Droppable droppableId={String(listID)}>
      {provided => (
        <div
          className="taskboardlist_container"
          {...provided.droppableProps}
          ref={provided.innerRef}
          style={styles.container}
        >
          <div className="sub-heading">{title}</div>
          {cards.map((card, index) => (
            <TaskboardCard
              key={card.id}
              index={index}
              text={card.text}
              id={card.id}
            />
          ))}
          <TaskboardActionButton listID={listID} />
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
};

const styles = {
  container: {
    backgroundColor: "#eee",
    width: 300,
    padding: "0.5rem",
    marginRight: "1rem",
    height: "100%"
  }
};

export default TaskboardList;

从“React”导入React；
从“/TaskboardCard”导入TaskboardCard；
从“/TaskboardActionButton”导入TaskboardActionButton；
从“dnd”导入{dropable}；
常量任务板列表=（{标题、卡片、列表ID}）=>{
返回(
{提供=>(
{title}
{cards.map（（卡片，索引）=>(
))}
{提供的.占位符}
)}
);
};
常量样式={
容器：{
背景色：“eee”，
宽度：300，
填充：“0.5雷姆”，
marginRight:“1rem”，
身高：“100%”
}
};
导出默认任务板列表；

我的TaskboardCard.js组件

import React from "react";
import Card from "@material-ui/core/Card";
import Typography from "@material-ui/core/Typography";
import CardContent from "@material-ui/core/CardContent";
import { Draggable } from "react-beautiful-dnd";
import { connect } from "react-redux";

import { deleteCard } from "../actions";

const TaskboardCard = ({ text, id, index, sample, cardId }) => {
  // handleClickDelete = () => {
  //   // const { dispatch } = this.props;
  //   // dispatch(deleteCard(cardId));
  //   console.log("clicked");
  // };

  return (
    <Draggable draggableId={String(id)} index={index}>
      {provided => (
        <div
          className="taskboard_container"
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <Card>
            <CardContent>
              <Typography style={{ fontSize: "1.5rem" }} gutterBottom>
                {text}
              </Typography>
            </CardContent>
          </Card>
          {/* //delete added */}
          <button
            onClick={(cardId, props, sample, dispatch) => {
              //const { dispatch } = this.props;
              dispatch(deleteCard(cardId));
            }}
          >
            DELETE
          </button>
          {/* ////////////////////// */}
        </div>
      )}
    </Draggable>
  );
};

export default connect()(TaskboardCard);

从“React”导入React；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/CardContent”导入CardContent；
从“dnd”导入{Draggable}；
从“react redux”导入{connect}；
从“./actions”导入{deleteCard}；
const TaskboardCard=（{text，id，index，sample，cardd}）=>{
//handleClickDelete=（）=>{
////const{dispatch}=this.props；
////调度（删除卡（cardId））；
//控制台日志（“单击”）；
// };
返回(
{提供=>(
{text}
{/*//删除已添加*/}
{
//const{dispatch}=this.props；
调度（删除卡（cardId））；
}}
>
删除
{/* ////////////////////// */}
)}
);
};
导出默认连接（）（任务板卡）；

在上面的组件中，删除按钮不起作用，因为我无法访问调度

---

这里是我的代码沙盒链接，用于进一步参考文件

从

onclick

事件中移除道具和分派，并在组件参数列表中添加

dispatch

如果未指定connect（）的第二个参数，则默认情况下，组件将在porps中接收分派

从“React”导入React；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/CardContent”导入CardContent；
从“dnd”导入{Draggable}；
从“react redux”导入{connect}；
从“./actions”导入{deleteCard}；
const TaskboardCard=（{text，id，index，sample，carid，dispatch}）=>{
//handleClickDelete=（）=>{
////const{dispatch}=this.props；
////调度（删除卡（cardId））；
//控制台日志（“单击”）；
// };
返回(
{提供=>(
{text}
{/*//删除已添加*/}
{
//const{dispatch}=this.props；
调度（删除卡（cardId））；
}}
>
删除
{/* ////////////////////// */}
)}
);
};
导出默认连接（）（任务板卡）；

连接TaskBoardCard组件后，您需要将dispatch传递到TaskBoardCard组件

const TaskBoardCard=（{text，id，index，sample，cardId，dispatch}）

之后您会遇到其他问题，但它至少会让您分派操作。

import React from "react";
import Card from "@material-ui/core/Card";
import Typography from "@material-ui/core/Typography";
import CardContent from "@material-ui/core/CardContent";
import { Draggable } from "react-beautiful-dnd";
import { connect } from "react-redux";

import { deleteCard } from "../actions";

const TaskboardCard = ({ text, id, index, sample, cardId, dispatch }) => {
  // handleClickDelete = () => {
  //   // const { dispatch } = this.props;
  //   // dispatch(deleteCard(cardId));
  //   console.log("clicked");
  // };
  return (
    <Draggable draggableId={String(id)} index={index}>
      {provided => (
        <div
          className="taskboard_container"
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <Card>
            <CardContent>
              <Typography style={{ fontSize: "1.5rem" }} gutterBottom>
                {text}
              </Typography>
            </CardContent>
          </Card>
          {/* //delete added */}
          <button
            onClick={(cardId, sample) => {
              //const { dispatch } = this.props;
              dispatch(deleteCard(cardId));
            }}
          >
            DELETE
          </button>
          {/* ////////////////////// */}
        </div>
      )}
    </Draggable>
  );
};

export default connect()(TaskboardCard);