Удаление элемента в списке дел

Question

Я хочу добавить кнопку удаления к моему компоненту 'Todo'

также сделать метод с именем deleteTodo в моем компоненте 'App'

передать метод 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 или доступ к подпрограммам внутри этих функций
2. У вас уже есть функция deleteTodo, объявленная в приложении.Компонент js, так что передайте эту функцию в качестве опоры компоненту Todo.
3. Вызовите функцию deleteTodo для кнопки onClick, используя this.props.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

Определите ваш метод 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>

Hopeэто решает ваш запрос !!