如何在Reactjs中删除元素onclick？

Question

我制作了CARD的显示器username.当我点击删除按钮即交叉或取消按钮时,它应该从tasklist这里的任务列表状态变量中删除CARD .我正在使用.map()方法迭代每个任务并显示它.我想删除特定用户的任务卡,当我点击红色十字按钮(见截图)时,目前只有窗口出现说 - > are you sure you want to delete it如果我点击是,它应该删除它.

码:

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()方法？这样特定的卡就会被删除.

Answer 1

通过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})
   }
}