試圖讓我的刪除按鈕在React組件上工作

Question

我正在使用React開發我的第一個項目，我有一個App和一個ToDo。 我正在定義一個deleteToDo方法，我希望該方法調用this.setState()並傳遞一個新數組，該數組沒有使用.filter()數組方法刪除待執行項。 我不想更改代碼或引入更多復雜性。 從本質上講，我希望盡可能地保持直截了當。 我仍然是React的初學者，所以這是一個很大的學習過程。 我覺得我很親密。

這是主要的應用程序

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(index) {
       const todos = this.state.todos.slice();
       const todo = todos[index];
       todo.deleteToDo = this.state.filter(index);
         this.setState({ todos: todos });
     }   

    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 } 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方面

 import React, { Component } from 'react';

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

  export default ToDo;

Answer 1

你沒有索引切片和數組，這可能是你刪除不起作用的原因

deleteToDo(index) {
    const todos = this.state.todos.slice(index, 1);
    this.setState({ todos: todos });
} 

Answer 2

1）您需要在構造函數中綁定deleteToDo方法

this.deleteToDo = this.deleteToDo.bind(this);

2）您需要在組件上設置與其索引相同的新屬性。

<ToDo
  key={index}
  id={index}
  description={ todo.description }
  // ...
/>

3）然后你可以將該索引作為參數傳遞給deleteToDo （確保正確拼寫方法名稱）。

<button
  type="button"
  onClick={() => this.props.deleteToDo(this.props.index)}
>Delete
</button>

4）最后，您可以將deleteToDo方法deleteToDo到以下內容：

deleteToDo(index) {

  // Return a new array that doesn't
  // have a row with a matching index
  const todos = this.state.todos.filter((el, i) => i !== index);
  this.setState({ todos });
}   

這是一個工作版本 。