Javascript 单击图标删除特定项目

我想在React JS“待办事项列表”中做一个练习 我必须点击垃圾箱按钮删除一些任务，但我不知道怎么做，因为我的代码会删除所有任务。 有人能帮我一步一步地解释一下怎么做吗？我是一名编程乞丐学生

这是我的密码

从“React”导入React；
//将引导npm库包括到捆绑包中
导入“引导”；
从“事件”导入{EventEmitter}；
//创建第一个组件
导出类inputTo扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入：“，
信息：[]
};
this.handleChange=this.handleChange.bind（this）；
this.keyPressed=this.keyPressed.bind（this）；
this.submitMessage=this.submitMessage.bind（this）；
this.deleteTask=this.deleteTask.bind（this）；
}
手变（活动）{
this.setState（{input:event.target.value}）；
}
按键（事件）{
如果（event.key==“输入”&&event.target.value！==”）{
this.submitMessage（）；
event.preventDefault（）；
}
}
submitMessage（）{
this.setState（{messages:[…this.state.messages，this.state.input]}）；
this.setState（{input:：}）；
}
deleteTask（）{
this.setState（{messages:[]}）；
}
render（）{
返回(
待办事项清单

{this.state.messages.map（（项，i）=>(

{item}

))}

);
}
}

@import“~bootstrap/scss/bootstrap.scss”；
梅因先生{
边际：0px；
}
.集装箱{
边界半径：10px；
边框：实心2倍rgb（80,75,75）；
最小高度：500px；
宽度：400px；
利润率：40px自动；
背景色：rgba（230、255、253、0.987）；
垫底：20px；
}
.头衔{
填充顶部：10px；
文本对齐：居中；
}
.fas{
左侧填充：20px；
}
迪维普特先生{
位置：相对位置；
显示：块；
宽度：360px；
高度：50px；
垫面：0.75rem；
右侧填充：1.25rem；
垫底：0.75rem；
左侧填充：1.25rem；
背景色：#fff；
边框：1px实心rgba（0,0,0,0.125）；
边框右下半径：0.25rem；
边框左下半径：0.25rem；
}
.列表组项目{
宽度：360px；
}
.远{
颜色：红色；
对齐内容：右对齐；
光标：指针；
}

//导入到包中
从“React”导入React；
从“react dom”导入react dom；
//将引导npm库包括到捆绑包中
导入“引导”；
//将index.scss文件包括到捆绑包中
导入“./style/index.scss”；
//导入您自己的组件
从“/component/inputdodo.js”导入{inputdodo}”；
//呈现您的应用程序
ReactDOM.render（，document.querySelector（“#app”）您需要做的第一件事是在deleteTask函数调用中传递元素的索引：

this.deleteTask（i）}
className=“远fa垃圾桶alt ml自动”
/>

然后，您可以使用deleteTask函数从状态中删除该项，如下所示：

deleteTask（一）{
const messages=this.state.messages.filter（（（uu，index）=>index！==i）
this.setState（{messages}）；
}
在Delete函数中，您正在删除所有任务，而应该从数组中删除一个元素。感谢您的帮助@selvio perez我有一些问题-这里的过滤函数到底是如何工作的-deleteTask（i）{const messages=this.state.messages.filter（{uu，index）=>index！==i）this.setState（{messages}）；}函数中{uu}具体做什么？filter（）方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。语法：让newArray=arr.filter（回调（element[，index，[array]]）[，thisArg]）谢谢@selvio perez我现在更好地理解了它以及它在filter方法中是什么？我不太清楚这一点过滤器回调接收4个参数，第一个是数组中正在处理的当前元素，第二个是当前元素的索引，所以我使用u以便能够访问函数的第二个参数。您可以在这里检查filter方法的工作方式