删除待办事项列表中的项目

Question

我想在我的“待办事项”组件中添加一个删除按钮

还在我的“应用”组件中创建一个名为 deleteTodo 的方法

将 deleteTodo 方法作为道具传递给“ToDo”组件

最后为删除按钮添加一个 onClick 事件监听器

我已经被困了好几天试图弄清楚这一点，任何帮助将不胜感激

我的 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> </button>
            </li>
      );
    }
}

export default ToDo;

应用程序

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: [
          { description: 'Walk the cat', isCompleted: true },
          { description: 'Throw the dishes away', isCompleted: false },
          { description: 'Buy new dishes', isCompleted: false }
        ],
          newTodoDescription: ''
      };
   }

  deleteTodo() {}

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

  handleSubmit(e) {
      e.preventDefault();
      if (!this.state.newTodoDescription) { return }
      const newTodo = { 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 });
    }

  render() {
    return (
      <div className="App">
        <ul>
        { this.state.todos.map( (todo, index) => 
                    <ToDo key={ index } description={ todo.description } isCompleted={ todo.isCompleted } toggleComplete={ () => this.toggleComplete(index) } />
                  )}
        </ul> 
        <form onSubmit={ (e) => this.handleSubmit(e) }>
                <input type="text" value={ this.state.newTodoDescription } onChange={ (e) => this.handleChange(e) } />
                <input type="submit" />
              </form>
      </div>
    );
  }
}

export default App;

Answer 1

1. 将所有事件处理函数更改为箭头函数或在构造函数中手动绑定它们，否则您无法执行 setState 或访问这些函数中的 props
2. 您已经在 App.js 组件中声明了 deleteTodo 函数，因此将此函数作为道具传递给 Todo 组件。
3. 使用 this.props.deleteTodo 通过传递描述作为参数调用按钮 onClick 上的 deleteTodo 函数。您将使用此描述在 deleteTodo 函数中从待办事项列表中删除待办事项
4. 现在，当单击按钮时，您需要删除一个项目，因此请过滤带有描述的 todos 状态数组
5. 并将新返回的待办事项设置为您的状态，以便您只看到可用的待办事项

这里是更新的代码

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: [
                   { description: 'Walk the cat', isCompleted: true },
                   { description: 'Throw the dishes away', isCompleted: false },
                   { description: 'Buy new dishes', isCompleted: false }
               ],
               newTodoDescription: ''
           };
        }

    deleteTodo = description  => {
          const newTodos = this.state.todos.filter(todo => todo.description != description);
          this.setState({
                 todos: newTodos
           });
    }

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

    handleSubmit = e => {
         e.preventDefault();
         if (!this.state.newTodoDescription) { return }
         const newTodo = { 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 });
      }

      render() {
          return (
             <div className="App">
                 <ul>
                     { this.state.todos.map( (todo, index) => 
                            <ToDo key={ index } description={ todo.description } isCompleted={ todo.isCompleted } toggleComplete={ () => this.toggleComplete(index) } deleteTodo={this.deleteTodo} />
                        )}
                 </ul> 
                <form onSubmit={ (e) => this.handleSubmit(e) }>
                      <input type="text" value={ this.state.newTodoDescription } onChange={ (e) => this.handleChange(e) } />
                     <input type="submit" />
                 </form>
            </div>
          );
         }
       }

       export default App;

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.deleteTodo(this.props.description)}>Delete Todo </button>
                   </li>
             );
          }
        }

      export default ToDo;

Answer 2

在 app 组件中定义你的 deleteToDo 方法并将其传递给 ToDo 组件，如下所示。

<ToDo 
   key={ index } 
   description={ todo.description } 
   isCompleted={ todo.isCompleted } 
   toggleComplete={ () => this.toggleComplete(index) } 
   deleteToDo={this.deleteToDo}
/>

然后在您的 ToDo 组件中，您可以将处理程序添加为

<button onClick={this.props.deleteToDo}> </button>

希望这能解决您的问题！！