反应删除按钮Todolist

Question

大家好，我有点麻烦，我在这里找到了一些主题，但似乎没有任何帮助反正这是我的问题。我需要使用.filter数组在应用程序组件上创建一个删除按钮以及一个删除todo方法，然后将其作为道具传递给ToDo组件，以及向删除按钮添加onClick事件监听器，让它调用deleteTodo，传递待办事项的索引。

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



 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;

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>
                 </li>

    );
  }
}

export default ToDo;

Answer 1

您可以在deleteTodo中创建一个新方法App，它接收您要删除的todo对象并从状态中过滤掉它。

由于todos的顺序现在会改变，你不能再使用数组索引作为key用于Todo组件。您可以将id添加到todo对象中，然后使用它。

例

class App extends React.Component {
  state = {
    todos: [
      { id: Math.random(), description: "Buy new dishes", isCompleted: false }
    ],
    newTodoDescription: ""
  };

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

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

  toggleComplete(todo) {
    this.setState({
      todos: this.state.todos.map(t => {
        if (t !== todo) {
          return t;
        }
        return { ...t, isCompleted: !t.isCompleted };
      })
    });
  }

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

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

class ToDo extends React.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}>Delete</button>
      </li>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>