如何在Reactjs中删除元素onclick？

Question

我制作了CARD＆＃39; s username。当我点击删除按钮，即交叉或取消按钮时，它应该从tasklist这里的任务列表状态变量中删除CARD。我正在使用.map()方法迭代每个任务并显示它。我想删除特定用户的任务卡，当我点击红色十字按钮（见截图）时，目前只有窗口显示 - ＆gt; 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})
   }
}

Answer 2

您需要编写删除任务的逻辑，如果将任务索引传递给triggerDelete，则更容易实现。 window.confirm返回一个布尔值，表示是否选择了OK or Cancel (true means OK).

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(index){
        if(window.confirm("Are you sure you want to delete this task?")){

           this.setState(prevState => ({
               taskList: [...prevState.taskList.slice(0, index), ...prevState.taskList.slice(index + 1)]
           }))

        }
    }

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(index);
                                        }}>
                                            <img src={require("../../images/cancel.svg")}/>
                                        </div>
                                    </div>
                                );
                            })
                        }
                        </div>
                    </div>

                </div>
            </div>
        )
    }
}