javascript - 如何删除 ReactJs 中的待办事项?
问题描述
这是我的代码,我试图从列表中删除一个项目,但不幸的是它没有根据它只是按 FIFO 顺序删除的索引进行删除。
export default class Todo extends Component{
constructor(){
super();
this.state={
text:"",
todoList:[]
}
}
handleText=(e)=>{
this.setState({text:e.target.value});
};
addTodo=()=>{
let {text,todoList}=this.state;
let list=[...todoList];
list.push(text);
this.setState({todoList:list,text:""})
};
这是一个删除功能,它正在获取项目的索引,但它不能正常工作。
delTodo=(index)=>{
alert(index);
let list2=[...this.state.todoList];
list2.splice(index,1);
this.setState({todoList:list2})
};
updateTodo=()=>{
};
render() {
let {text,todoList}=this.state;
return(
<div className="App-header">
<div className="childApp">
<ul className="list-group">
{todoList.map((val,index) => {
return (
<div className="mytodo">
<li className="list-group-item">
<span classname="spname"> {val} </span>
<button key={index} id={index} class="btn btn-default btn-s pull-right remove-item" onClick={this.delTodo}>
<span className="glyphicon glyphicon-remove"></span>
</button>
</li>
</div>
);
}
)}
</ul>
<h1>You have {todoList.length} Todos</h1>
<input className="todoinput" name="text" value={text} onChange={this.handleText}/>
<br/>
<button type="button" onClick={this.addTodo} className="btn btn-success">Add Todo</button>
<br/>
</div>
</div>
);}}
解决方案
问题
需要一个索引,但是您传递的delTodo
是 onClick 事件对象,它不是有效的索引,因此拼接从数组的开头开始。
解决方案
定义一个匿名 onClick 回调并将索引传递给delTodo
回调
delTodo = index => {
alert(index);
const list2 = [...this.state.todoList];
list2.splice(index, 1);
this.setState({ todoList: list2 });
};
...
<button
key={index}
id={index}
class="btn btn-default btn-s pull-right remove-item"
onClick={() => this.delTodo(index)}
>
...
或者重新定义delTodo
curry 索引值,直接附加为 onClick 回调
delTodo = index => () => {
alert(index);
const list2 = [...this.state.todoList];
list2.splice(index, 1);
this.setState({ todoList: list2 });
};
...
<button
key={index}
id={index}
class="btn btn-default btn-s pull-right remove-item"
onClick={this.delTodo(index)}
>
...
推荐阅读
- c# - C++ 向量与 C# 列表。为什么它们会产生不同的结果?
- python - 从一个 pandas df 到另一个的平均行作为平均值(使用两个键)
- function - 在 Fortran 90 函数中添加打印语句这不起作用
- javascript - 单击元素时材质ui工具提示未关闭
- bash - Shell 脚本错误 - 错误替换 - 原理
- azure - 与使用 Azure .NET SDK 相比,Pulumi 有那么神奇吗?
- php - 如何连接 PhpStorm 和 Xdebug
- apache - Apache ProxyPass 不适用于自定义应用程序
- ios - 如何在 UIButton 中嵌入图标
- discord.js - TypeError:connection.playStream 不是一个函数 discord bot