javascript - 寻找从看板卡中删除项目的方法，分为几个部分

Question

我正在尝试创建一个简单的看板应用程序，但无法创建 removeCard 方法

不幸的是，我的卡片组件似乎以一种奇怪的方式分层，这让我很难理解在哪里传递所有必需的引用

我已经粘贴了一些代码，所以有人可以摆弄它并了解建议我可能有什么问题。

非常感谢您提前。

我已经尝试了几种我在这里找到的现有方法，但似乎很难将它们调整到我的卡片层。

问题似乎出在文件 KanbanBoard.jsx （称为 removeCard 的方法和返回的内容）和 KanbanCard.jsx 以及删除按钮上的 onClick 事件之间

看板

import React from "react";
//import styles from "./KanbanColumn.module.css";
import KanbanColumn from '../KanbanColumn/KanbanColumn';
import SubmitForm from '../Submit/SubmitForm';

/*
 * The Kanban Board React component
 */
class KanbanBoard extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({

            isLoading: true,
            projects: [],
            draggedOverCol: 0,
            todos: [], 
            text: '', 
        });
        this.handleOnDragEnter = this.handleOnDragEnter.bind(this);
        this.handleOnDragEnd = this.handleOnDragEnd.bind(this);
        this.handleAddCard = this.handleAddCard.bind(this);
        this.removeCard = this.removeCard.bind(this);
        this.columns = [
            {name: 'Planning', stage: 1},
            {name: 'Design', stage: 2},
            {name: 'In Progress', stage: 3},
            {name: 'Testing', stage: 4},
            {name: 'Launch', stage: 5},
        ];
    }

    componentDidMount() {
        this.setState({ projects: this.props.projectList, isLoading: false });
    }

    //this is called when a Kanban card is dragged over a column (called by column)
    handleOnDragEnter(e, stageValue) {
        this.setState({ draggedOverCol: stageValue });
    }

    //this is called when a Kanban card dropped over a column (called by card)
    handleOnDragEnd(e, project) {
        const updatedProjects = this.state.projects.slice(0);
        updatedProjects.find((projectObject) => {return projectObject.name === project.name;}).project_stage = this.state.draggedOverCol;
        this.setState({ projects: updatedProjects });
    }

    handleAddCard(project) {



        let newProject = { 
            name: project.name,
            description: project.description,
            project_stage: project.project_stage
        }


        let currentProjects = this.state.projects;
        currentProjects.push(newProject)
        this.setState({ projects: currentProjects, isLoading: false });
    }


    removeCard (index) {

        const { projects } = this.state;
        const newTodos = projects.filter((projects, i) => i !== index);
        this.setState({ projects: newTodos});

    }

    render() {
        if (this.state.isLoading) {
            return (<h3>Loading...</h3>);
        }

        return  (

            <div>
                <div>
                <SubmitForm onAddCard={this.handleAddCard}/>
                </div>

                <div>

                    {this.columns.map((column) => {
                        return (
                            <KanbanColumn

                                name={ column.name }
                                stage={ column.stage }
                                projects={ this.state.projects.filter((project) => {return parseInt(project.project_stage, 10) === column.stage;}) }
                                onDragEnter={ this.handleOnDragEnter }
                                onDragEnd={ this.handleOnDragEnd }
                                removeItem={this.removeItem} 
                                todos={this.state.todos}
                                key={ column.stage }
                            />
                        );
                    })}
                </div>
            </div>
        );
    }
}

export default KanbanBoard;

看板卡

import React from "react";
import styles from "./KanbanCard.module.css";

/*
 * The Kanban Board Card component
 */
class KanbanCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: true,
            index: {
                name: this.name,
                description: this.description,
                project_stage: this.project_stage
            },
        };
    }



    render() {



        return (
                <div
                    className="card text-white bg-secondary mb-3"
                    draggable={true}
                    onDragEnd={(e) => {this.props.onDragEnd(e, this.props.project);}}

                >

                    <div className="card-header"><h4>{this.props.project.name}</h4></div>
                        <div className="card-body text-white">
                            <div className="card-title"><strong>Description: </strong></div>
                            {(this.state.collapsed)
                                ? null
                                : (<div className="card-text">{ this.props.project.description }<br/></div>)
                            }
                            <div
                                style={{'width': '100%'}}
                                onClick={(e) => {this.setState({collapsed: !this.state.collapsed});}}
                            >
                                {(this.state.collapsed) ? String.fromCharCode('8757') : String.fromCharCode('8756')}
                            </div>
                        </div>
                        <div className="card-footer" >
                         <div>
                    <button 
                            className="btn btn-dark" onClick={(e) => {this.props.removeCard(this.props.index);}}>Delete

                    </button>
                    </div>
                    </div> 
                </div>
            )
        }



}

export default KanbanCard;

标签： javascriptreactjsreact-router