В React компонентах-классах методы не привязаны автоматически к экземпляру компонента. Когда ты используешь их как обработчики событий, нужно привязать их явно, чтобы сохранить правильный контекст this. Есть три основных способа:
Это самый явный подход. Привяжи метод в конструкторе, используя метод .bind():
class Foo extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
Используй синтаксис стрелочной функции как свойство класса, чтобы автоматически привязать метод:
handleClick = () => {
console.log('this is:', this)
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
Это чище и современнее.
Определи встроенную стрелочную функцию прямо в JSX:
handleClick() {
console.log('Click happened');
}
render() {
return <button onClick={() => this.handleClick()}>Click Me</button>;
}
Для простых обработчиков событий все три способа работают. Но избегай встроенных стрелочных функций, когда передаёшь коллбеки как пропсы дочерним компонентам. Они создают новые экземпляры функций при каждом рендере, вызывая ненужный ре-рендеринг дочерних компонентов.
Для оптимальной производительности с дочерними компонентами используй либо привязку в конструкторе, либо синтаксис public class fields. Оба варианта гарантируют, что одна и та же ссылка на функцию сохраняется между рендерами.
Стрелочные функции, определённые как свойства класса, автоматически привязываются к экземпляру компонента без необходимости явных вызовов .bind() в конструкторе.
Новый — ещё не проверен сообществом
Вы