Javascript React Todo Delete按钮一次删除所有列出的项目

我有两个文件

App.js

    import React, { Component } from 'react';
    import './App.css';
    import ToDo from './components/ToDo.js';

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          todos: [],
          newTodoDescription: ''
        };
        this.deleteTodo = this.deleteTodo.bind(this);
      }

    handleChange(e) {
      this.setState({ newTodoDescription: e.target.value })
    }

    handleSubmit(e) {
      e.preventDefault();
      if (!this.state.newTodoDescription) { return }
      const newTodo = { id: this.state.todos.id, description: this.state.newTodoDescription, isCompleted: false };
      this.setState({ todos: [...this.state.todos, newTodo], newTodoDescription: '' });
    }


    toggleComplete(index) {
      const todos = this.state.todos.slice();
      const todo = todos[index];
      todo.isCompleted = todo.isCompleted ? false : true;
      this.setState({ todos: todos });
    }




    deleteTodo(id) {
      const remainingToDos = this.state.todos.filter((todo, remainingToDos) => {
          if(todo.id !== remainingToDos.id) return todo; });
      this.setState({ todos: remainingToDos });
    }


      render() {
        return (
          <div className="App">
            <h1>Add a ToDo!</h1>
            <form onSubmit={ (e) => this.handleSubmit(e)}>
              <input type="text"
                value={ this.state.newTodoDescription }
                onChange={ (e) => this.handleChange(e) }
                />
              <input type="submit" value="Add Todo" />
            </form>
            <ul>
              { this.state.todos.map( (todo) =>
                <ToDo key={ todo.id }
                  description={ todo.description }
                  isCompleted={ todo.isCompleted }
                  toggleComplete={ () => this.toggleComplete(todo) }
                  onDelete={ this.deleteTodo }
                   />
              )}

            </ul>
          </div>
        );
      }
    }

    export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“./components/ToDo.js”导入ToDo；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
待办事项：[]，
新密码说明：“”
};
this.deleteTodo=this.deleteTodo.bind（this）；
}
手变（e）{
this.setState（{newTodoDescription:e.target.value}）
}
handleSubmit（e）{
e、 预防默认值（）；
如果（！this.state.newTodoDescription）{return}
const newTodo={id:this.state.todos.id，描述：this.state.newTodoDescription，isCompleted:false}；
this.setState（{todos:[…this.state.todos，newTodo]，newTodoDescription:''}）；
}
切换完成（索引）{
const todos=this.state.todos.slice（）；
常数todo=todo[索引]；
todo.isCompleted=todo.isCompleted？false：true；
this.setState（{todos:todos}）；
}
删除TODO（id）{
const remainingToDos=this.state.todos.filter（（todo，remainingToDos）=>{
if（todo.id！==remaingtodos.id）返回todo；}）；
this.setState（{todos:remaingtodos}）；
}
render（）{
返回(
添加待办事项！
此.handleSubmit（e）}>
这个.handleChange（e）}
/>

{this.state.todos.map（（todo）=>
this.toggleComplete（todo）}
onDelete={this.deleteTodo}
/>
)}

);
}
}
导出默认应用程序；

ToDo.js

      import React, { Component } from 'react';

      class ToDo extends Component {
        render() {
          return (
            <li>
              <input type="checkbox" checked={ this.props.isCompleted } onChange={ this.props.toggleComplete } />
              <span>{ this.props.description }  {''}</span>
              <button onClick={() => this.props.onDelete(this.props.id)}>Remove Todo</button>
            </li>
          );
        }
      }

      export default ToDo;

import React，{Component}来自'React'；
类ToDo扩展组件{
render（）{
返回(

{this.props.description}{'}
this.props.onDelete（this.props.id）}>删除Todo

);
}
}
导出默认ToDo；

我想要完成的是：在列表中添加许多待办事项。单击删除待办事项按钮。只有选定的todo才会被删除

---

我是一个新的反应者，无法理解这一点。在我的deleteToDo方法中，我试图过滤掉TODO，只保留当前的TODO。我不清楚我是否正确使用了.filter。

我相当肯定您的代码过于复杂了。您根本没有使用传递到方法中的参数

id

。您的

deleteTodo

方法可以是：

deleteTodo = (id) => {
    var remainingToDos = this.state.todos.filter((todo) => {
        return todo.id === id
    });

    this.setState({ todos: remainingToDos })
}

---

我敢肯定，您的代码过于复杂了。您根本没有使用传递到方法中的参数

id

。您的

deleteTodo

方法可以是：

deleteTodo = (id) => {
    var remainingToDos = this.state.todos.filter((todo) => {
        return todo.id === id
    });

    this.setState({ todos: remainingToDos })
}

---

问题是

filter（）

方法应该返回一个条件，而不是值：

deleteTodo(id) {
      const remainingToDos = this.state.todos.filter((todo, remainingToDos) => {
          return (todo.id !== remainingToDos.id)
       });
      this.setState({ todos: remainingToDos });
}

---

问题是

filter（）

方法应该返回一个条件，而不是值：

deleteTodo(id) {
      const remainingToDos = this.state.todos.filter((todo, remainingToDos) => {
          return (todo.id !== remainingToDos.id)
       });
      this.setState({ todos: remainingToDos });
}