如何在ReactJs中删除待办事项？

Beren 发表于 Dev

贝伦

这是我的代码，其中我试图从列表中删除一个项目，但是不幸的是，它并没有根据它只是以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>
              );}}

德鲁·里斯（Drew Reese）

问题

在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)}
>
  ...

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。