`this` не занят обработчиками событий React Component

Question

Я тестирую новые классы компонентов React v0.13 ES6, и у меня возникла проблема. Когда я пытаюсь заставить обработчик кликов внутри класса вызвать функцию, полученную компонентом через реквизиты, она выдает ошибку, говорящую, что this не определен.

import React, { Component } from 'react'; 

class MyComp extends Component { 
    render() { 
    return (
     <div> 
     <input type='button' value='Fetch Data' onClick={this.handleClick} /> 
     </div> 
    ); 
    } 

    handleClick(evt) { 
    // ...do stuff 

    this.props.fetch(); // throws error: `cannot read property 'this' of undefined` 
    } 
} 

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

Когда я использую старый синтаксис React.createClass, тот же код работает нормально, поэтому мне интересно, пропустил ли я что-то. Я знаю, что могу легко это исправить, просто привязывая this к методу handleClick в функции рендеринга, но я бы предпочел, если это что-то простое.

Answer 1

Изменить следующую строку:

<input type='button' value='Fetch Data' onClick={this.handleClick} /> 

В это:

<input type='button' value='Fetch Data' onClick={this.handleClick.bind(this)} /> 

Или добавьте constructor следующим:

constructor() { 
    super(); 
    this.handleClick = this.handleClick.bind(this); 
} 

Или, если вы используете ES7 функции, которые вы мог бы заглянуть в создание собственного или using an existing автообъектов.

В некоторой смежной ноте: вместо этого используйте элемент button.