Блог

Я новичок в 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(). Но это не сработало.

В вашем конструкторе вы должны привязывать 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)} , при ее настройке, иначе она будет вызываться каждый раз, когда ваш компонент будет повторно отображаться.