Почему моя отправка не работает для события нажатия кнопки?

Question

Я построил клон Trello, используя ReactJS, где у меня есть 4 столбца с именами TODO, DOING, DONE и REJECTED, где я могу добавить карту в любой столбец.

В файле, который я пытаюсь для сопоставления компонента карты и свойств рендеринга из определенных фиктивных данных.

Что я хочу сделать?

• Я хочу удалить указанную карту c при нажатии кнопки.

Что я пробовал?

• Я добавил функциональность в мой магазин Redux, но при добавлении события onclick к моей кнопке я не могу получить доступ к методу отправки, который будет вызвать функцию deleteCard.

Как мне это сделать?

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;

My 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);

В вышеприведенном компоненте кнопка удаления не работает, потому что каким-то образом я не могу получить доступ к отправке.

Вот моя ссылка кодов и ящиков для дальнейшей ссылки на файлы https://codesandbox.io/s/github/abhinav-anshul/consensolabs

Answer 1

Удалите реквизиты и отправку из события onclick и добавьте dispatch в список параметров компонента.

Если вы не укажете второй аргумент для connect (), ваш компонент получит диспетчеризацию по умолчанию в porps.

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