为什么我的调度对按钮单击事件不起作用？

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

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

我想做的事？

• 单击该按钮后，我想删除特定的卡。

我尝试了什么？

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

我怎么做？

我的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;

我的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);

在上述组件中，删除按钮不起作用，因为我无法以某种方式访问​​该调度。

这是我的codeandbox链接，可进一步参考文件https://codesandbox.io/s/github/abhinav-anshul/consensolabs