javascript - 如何使用数据对象中的 id 删除卡片组件？

Question

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

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

我想做什么？

• 我想在以某种方式使用卡 ID 点击特定卡时删除该卡。

问题是什么？

• 我不明白如何在匹配某个 ID 时删除整个卡片对象。

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

const TaskboardCard = ({ text, id, index, sample }) => {
  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>
        </div>
      )}
    </Draggable>
  );
};

export default TaskboardCard;

为了进一步引用更多文件，我附上了我的 GitHub 链接。请考虑参观。 任何帮助将非常感激。 https://github.com/abhinav-anshul/consensolabs

这是现场演示的链接 https://consensolab.abhinavanshul.com/

Answer 1

// src/actions/index.js
export const CONSTANTS = {
  ADD_CARD: "ADD_CARD",
  ADD_LIST: "ADD_LIST",
  DRAG_HAPPENED: "DRAG_HAPPENED",
  DELETE_CARD: "DELETE_CARD"
};

// src/actions/cardActions.js

export const deleteCard = cardId => ({
    type: CONSTANTS.DELETE_CARD,
    payload: { cardId }
});

// src/reducers/listReducers.js


const listReducer = (state = initialState, action) => {
  // ...

    case CONSTANTS.DELETE_CARD: {
      return {
        ...state,
        cards: state.cards.filter(({id}) => id !== action.payload.cardId)
      }
    }

然后从删除按钮中，您只需调用 dispatch(deleteCard(cardId))

编辑:我已经更新了您的代码沙箱来实现此 https://codesandbox.io/s/stupefied-golick-7z78k