Question

我是React的新手，我正在尝试将此箭头函数转换为与此绑定的函数。我已经尝试使用本指南（https://medium.freecodecamp.org/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb），但没有成功。

非常感谢您的帮助/解释，在此先感谢您！

toggleComplete(index) {
      const todos = this.state.todos.slice();
      const todo = todos[index];
      todo.isCompleted = todo.isCompleted ? false : true;
      this.setState({ todos: todos });
    }

....

完整代码在这里：https://codeshare.io/2pw0q0

在组件调用中，我尝试更改

toggleComplete={ () => this.toggleComplete(index)}

进入：

toggleComplete={this.toggleComplete}

并添加

this.toggleComplete=this.toggleComplete.bind(this)

在constructor（）函数下面。但这没有解决。

Answer 1

在构造函数中，设置状态时应绑定toggleComplete

constructor(props) {
  super(props);
  this.state = {
    todos: [
      { description: 'Walk the cat', isCompleted: true, isDeleted: false },
      { description: 'Throw the dishes away', isCompleted: false, isDeleted: false },
      { description: 'Buy new dishes', isCompleted: false, isDeleted: false }
    ],
    newTodoDescription: '',
    this.toggleComplete: this.toggleComplete.bind(this)
  };
}

我还认为您的逻辑可能不适合切换待办事项。在您的班级中设置函数时，可以执行以下操作。

toggleComplete(index) {
  const { todos } = this.state;
  const updatedTodos = todos.map((todo, idx) => {
    if (idx === index) {
       todo.isCompleted = !todo.isCompleted
    }
  }
  this.setState({ todos: updatedTodos });
}

在您的渲染方法中

toggleComplete={this.toggleComplete}
index={index}

似乎您正在向下传递toggleComplete函数，并实际上在ToDo组件上调用它，不是吗？如果是这样，请将index和toggleComplete传递为道具，然后可以在toggleComplete组件上调用ToDo。设置时，请确保使用onClick={() => this.props.toggleComplete(index)}之类的箭头函数，否则每次重新渲染组件时都会调用它。

如何转换特定的事件处理程序箭头功能并使用.bind

1 个答案: