这是我的代码,其中我试图从列表中删除一个项目,但不幸的是,它并没有根据它只是以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>
);}}
答案 0 :(得分:1)
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
来修改索引值并直接作为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)}
>
...