Question

This是我用ReactJS制作的todo应用程序。 我无法正确删除todo。

无论点击哪一个，它总是删除最后一个待办事项。

示例：如果我点击删除'购买袜子'，它将删除'Oi他们'。如果我尝试在调试器中检查我的列表状态，它会删除正确的ToDo。

我将代码上传到GitHub repository，使用create-react-app进行设置应该非常容易设置。

据我所知，我在TodoList状态下删除的todo条目不会删除已删除子项的状态，因此它不会停止存在。

我该如何照顾它？我做错了什么？

提示：here是删除不必要代码的要点。

Answer 1

现在你的this函数绑定了deleteTodo错误。 this.setState()函数想要设置父组件的状态，并调用this。但是，this绑定在子构造函数中。您希望将deleteTodo绑定到父组件的构造函数中的TodoList：TodoList。

这样当调用该函数时，它将使用新的，已过滤的待办事项列表正确设置this.deleteTodo = this.deleteTodo.bind(this)的状态。

因此，请更详细地说明您发布的代码中所需的更改。

首先在TodoList的构造函数中绑定deleteTodo

this.setState

现在，当在deleteTodo函数中调用onClick={this.props.deleteTodo.bind(this,todoText)}时，它将设置正确组件的状态。

现在我们需要确保正确传递delete todo的参数。在Todo组件中，替换

function(){this.props.deleteTodo(todoText)}

带

{{1}}

你不需要在这里绑定，包装deleteTodo函数，以便在调用onClick时，包装函数使用正确的参数调用deleteTodo。

单击该元素时，将调用分配给onClick prop的函数，并将click事件对象作为参数。我们将此函数设置为使用正确的参数调用deleteTodo，忽略事件对象。

Answer 2

    class Todo extends React.Component {
        /*...*/
        handleDelete() {
          this.props.deleteTodo(this.state.text);
        }
        /*...*/
        render() {
            let priorityClass = this.switchPriority(this.state.priority);
            let completedClass = this.getCompletedClass(this.state.completed);
            let todoClasses = classNames(priorityClass, completedClass);
            return (
                <tr className={todoClasses}>
                <td><button ref='deleteTodo' onClick={this.handleDelete.bind(this)} className='close-button'>&times;</button></td>
                <td  onClick={this.handleClick} className='todo-row'>{this.state.text}</td>
                </tr>);
        }
    }
    
    class TodoList extends React.Component {
        /*...*/
        deleteTodo(todoToRemove) {
            let newTodos = this.state.todos.filter((_todo) => _todo.text !== todoToRemove);
            this.setState({
                todos: newTodos
            });
        }
      /*...*/
    }

你可以尝试一下吗？我认为这是因为你绑定了deleteTodo两次。

Reactjs没有正确呈现我的状态

2 个答案: