Значение этого в обработчике событий React

По какой-то причине значение этого теряется в обработчике обработчика событий. Читая документы, я подумал, что реакция на это сделала кое-что, чтобы убедиться, что это значение установлено на правильное значение

Следующее не работает, как я ожидал

import React from 'react';

export default class Observer extends React.Component {

    handleClick() {
        console.log(this); //logs undefined
    }
    render() {
        return (
            <button onClick={this.handleClick}>Click</button>
        );
    }
}

Но это делает:

import React from 'react';

export default class Observer extends React.Component {

    handleClick() {
        console.log(this); //logs Observer class instance
    }
    render() {
        return (
            <button onClick={this.handleClick.bind(this)}>Click</button>
        );
    }
}

React и ES6 для меня новичок, но, похоже, это не правильное поведение?

Ответы

Ответ 1

Это правильное поведение для JavaScript и React, если вы используете новый синтаксис class.

Функция автоматической привязки

Ответ 2

Принятый ответ хорош, и я много использовал его в ES6, но я просто хочу добавить еще одно "более современное" решение с ES7 (упомянутое в React примечания по автоматическому привязке класса компонента): используйте функции со стрелками как свойства класса, тогда вам не нужно связывать или переносить обработчик где-нибудь.

export default class Observer extends React.Component {
  handleClick = (e) => {
    /* ... */
  }
  render() {
      return <button onClick={this.handleClick}>Click</button>
  }
}

Это самое простое и чистое решение!

Ответ 3

Как и другие, React не использует методы autobind для экземпляра при использовании классов ES6. Тем не менее, я бы привык всегда использовать функции стрелок в обработчиках событий, таких как: onClick={e => this.handleClick()}

Вместо onClick={this.handleClick.bind(this)}

Это потому, что это означает, что вы можете заменить метод handleClick шпионом в тесте, что вы не можете сделать, когда используете bind.