Question

我有一个用React编写的简单ToDo应用程序。我无法弄清楚如何删除ToDos。

我有两个单独的文件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: [
            { id: 1, description: 'Walk the cat', isCompleted: true },
            { id: 2, description: 'Throw the dishes away', isCompleted: false },
            { id: 3, description: 'Buy new dishes', isCompleted: false}
          ],
          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 = { 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) {
      this.setState((prevState) => ({
        items: prevState.items.filter(item => item.id !== id),
      }))
    }


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

            </ul>
          </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 } />
              <button onClick={() => this.props.deleteTodo(this.props.id)}>Delete</button>
              <span>{ this.props.description }</span>
            </li>
          );
        }
      }

      export default ToDo;

当我点击按钮时，出现错误：TypeError：_this2.props.deleteTodo不是函数

如何让我当前的代码生效？

Answer 1

你道具的名字是onDelete，所以在你的组件ToDo.js中，你必须调用你的函数如下

<button onClick={() => this.props.onDelete(this.props.id)}>Delete</button>

作为对你的评论的回答

您的州定义为

   this.state = {
      todos: [
        { id: 1, description: 'Walk the cat', isCompleted: true },
        { id: 2, description: 'Throw the dishes away', isCompleted: false },
        { id: 3, description: 'Buy new dishes', isCompleted: false}
      ],
      newTodoDescription: ''
    };

所以，你的函数deleteTodo应该像

deleteTodo(id) {
    this.setState((prevState) => ({
        todos: prevState.todos.filter(item => item.id !== id),
    }))
};

Answer 2

我建议您使用拼接方法。

React JS：如何使这个删除按钮工作

2 个答案: