Как преобразовать определенную функцию стрелки обработчика событий и использовать .bind

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