Почему и когда нам нужно связывать функции и EventHandlers в React?

Question

class SomeClass extends Component{
  someEventHandler(event){
  }
  render(){
    return <input onChange={------here------}>
  }
}

Я вижу разные версии ------here------ часть.

// 1
return <input onChange={this.someEventHandler.bind(this)}>

// 2
return <input onChange={(event) => { this.someEventHandler(event) }>

// 3
return <input onChange={this.someEventHandler}>

Чем отличаются версии? Или это просто вопрос предпочтений?

---

Спасибо всем за ответы и комментарии. Все они полезны, и я настоятельно рекомендую прочитать эту ссылку ПЕРВЫМ, если вы, как и я, запутались в этом.
http://blog.andrewray.me/react-es6-autobinding-and-createclass/

Answer 1

Каждый отличается, и это зависит от того, как настроен ваш компонент

Первый.bind(this) используется, чтобы связать ваш контекст this с функцией компонентов. Классы React ES6 не привязывают контекст автоматически, поэтому вы должны связывать их явно. Есть несколько способов сделать это и .bind(this) вдали. если вы не хотите использовать этот метод, вы можете либо

а. в вашем конструкторе сделайте привязку. ака

class SomeClass extends Component{
    constructor(){
        super();
        this.someEventHandler = this.someEventHandler.bind(this);
    }
    someEventHandler(event){
    }
    ....
} 

или б. сделайте свои пользовательские функции на функции жирной стрелки класса. ака

class SomeClass extends Component{
    someEventHandler = (event) => {
    }
    ....
}

все это имеет дело с этим контекстным связыванием.

ВтороеonChange={(event) => { this.someEventHandler(event) } заключает в себе функцию обработчика компонентов встроенной лямбда-функцией (жирная стрелка), которая может предоставить некоторые дополнительные функции. Допустим, вы хотите отправить дополнительный параметр для вашей функции, это способ достижения этого.

<input onChange={(event) => { this.someEventHandler(event, 'username') }>

это был бы способ передать дополнительный параметр в функцию-обработчик, если это необходимо.

В-третьих. Вы просто передаете функцию в качестве функции обратного вызова для запуска, когда происходит событие щелчка, без дополнительных параметров

Подвести итоги. Все эти три примера связаны с передачей функции-обработчика событию click. Однако есть и другие вещи, которые вы можете добавить к этому. первое касается твоего this контекст. вторая о том, как передать аргументы в функцию-обработчик.

Answer 2

Зачем связывать функцию React?

Когда вы определяете компонент с использованием класса ES6, общий шаблон для обработчика событий должен быть методом класса. В JavaScript методы класса не связаны по умолчанию. Если вы забудете bind this.someEventHandler и передать его onChange, это будет неопределенным, когда функция на самом деле вызывается.

Как правило, если вы ссылаетесь на метод без () после него, например onChange={this.someEventHandler}, вы должны связать этот метод.

Есть три способа связать ваш onChange функционировать в правильном контексте

Первый

return <input onChange={this.someEventHandler.bind(this)}>

В этом мы используем bind явно для того, чтобы сделать событие onChange доступным в качестве аргумента для eventHandler. Мы также можем отправить другой параметр с типом синтаксиса, например

return <input onChange={this.someEventHandler.bind(this, state.value)}>

второй

return <input onChange={(event) => { this.someEventHandler(event) }>

Это синтаксис ES6, посредством которого мы можем указать параметры, которые мы хотим передать someEventHandler функция. Это эквивалентно .bind(this) Тем не менее, это также дает нам возможность отправлять другие атрибуты вместе с событием, как

return <input onChange={(event, value) => { this.someEventHandler(event, value) }>

В третьих

Определите функцию someEventHandler, используя функцию Arrow

someEventHandler = () => {
    console.log(this); // now this refers to context of React component
}

arrow function не имеет своего this, this используется значение окружающего контекста выполнения, и, следовательно, вышеприведенная функция получает правильный контекст.

или связать его в конструкторе, как

constructor(props) {
   super(props);
   this.someEventHandler = this.someEventHandler.bind(this);
}


return <input onChange={this.someEventHandler}>

В этом методе событие напрямую присоединяется к someEventHandler функция. Никакие другие параметры не могут быть переданы таким образом