javascript - 如何在Reactjs中删除元素onclick？

我已经制作了显示username的CARD。当我单击删除按钮(即十字或取消按钮)时，应从tasklist中删除CARD，此处的任务列表是状态变量。我正在使用.map()方法来遍历每个任务并显示它。当我单击红叉按钮(请参见屏幕截图)时，我想删除特定用户的任务卡。当前只有出现的窗口显示-> are you sure you want to delete it，如果单击"is"，则应将其删除。

码:

import React, {Component} from "react";

export default class Tasks extends Component{
    constructor(props){
        super(props);
        this.state = {
            taskList:[],
            taskName:"",
            type:"classification",
            datasetName:"",
            allDatasets:[],
            users:[],
            names:[]
        }
    }

triggerDelete(task){
        if(window.confirm("Are you sure you want to delete this task?")){

        }
    }

render(){
        return(
            <div className="tasks-wrap">
                <h1 onClick={()=>{
                   this.props.history.push("/taskdetails");
                }}>Your Tasks</h1>
                {
                            this.state.taskList.map((task,index)=>{
                                return(
                                    <div key={index} className="item-card" onClick={()=>{
                                        window.sessionStorage.setItem("task",JSON.stringify(task));
                                        this.props.history.push("/taskdetails/");
                                    }}>
                                        <div className="name">{task.name}</div>
                                        <div className="sub">
                                            <div className="type">Dataset: {task.dateSetName}</div>
                                            <div className="members">{task.userList.length + " participants"}</div>
                                        </div>
                                        <div className="del-wrap" onClick={(e)=>{
                                            e.stopPropagation();
                                            e.preventDefault();
                                            this.triggerDelete(task);
                                        }}>
                                            <img src={require("../../images/cancel.svg")}/>
                                        </div>
                                    </div>
                                );
                            })
                        }
                        </div>
                    </div>

                </div>
            </div>
        )
    }
}

我应该如何修改triggerDelete()方法？这样就删除了特定的卡。

最佳答案

将删除任务的index传递给triggerDelete函数，然后从this.state.taskList数组中删除该索引。

<div className="del-wrap" onClick={(e)=>{
      e.stopPropagation();
      e.preventDefault();
      this.triggerDelete(task, index);
   }}>
        <img src={require("../../images/cancel.svg")}/>
</div>

并在triggerDelete函数中

triggerDelete(task, index){
   if(window.confirm("Are you sure you want to delete this task?")){
      let taskList = [...this.state.taskList]
      taskList.splice(index, 1);
      this.setState({taskList: taskList})
   }
}