"setState on undefined" эта ошибка при попытке использовать компонент реакции в стиле es6 в гибкой среде Yahoo

Question

РЕДАКТИРОВАТЬ: Моя ошибка, мой веб-пакет hotloader почему-то кэшировал старый JS каждый раз, когда я запускал сборку. Сброс и восстановление и, кажется, работает сейчас.

Я пытаюсь создать простое окно поиска, используя объявление класса в стиле es6, в приложении Yahoo. Я работаю над примером todo, преобразовываю его в синтаксис стиля es6 и получаю сообщение об ошибке this.setState в _onChange метод. Я связал функции с "этим" в конструкторе, но все еще получаю ошибку.

import React from 'react';
import searchProducts from '../actions/searchProducts';

const ENTER_KEY_CODE = 13;

class SearchBox extends React.Component {

    static contextTypes = {
        executeAction: React.PropTypes.func.isRequired
    };

    static propTypes = {
        text: React.PropTypes.string
    };

    static defaultProps = {
        text:''
    };

    constructor(props) {
        super(props);
        this.state = {
            text: props.text
        };
        this._onChange = this._onChange.bind(this);
        this._onKeyDown = this._onKeyDown.bind(this);
    }

    render() {
        return (
            <input
                className="search-box"
                name="search-keyword"
                value={this.state.text}
                onChange={this._onChange}
                onKeyDown={this._onKeyDown}
            />
        );
    }

    _onChange(event, value) {
        console.log( event.target.value);

        //error is here///////////////////////////////////////////////////
        this.setState({text: event.target.value}); 
    }

    _onKeyDown(event) {
        if (event.keyCode === ENTER_KEY_CODE) {
            event.preventDefault();
            event.stopPropagation();

            var text = this.state.text.trim();
            if (text) {
                this.context.executeAction(searchProducts, {
                    text: text
                });
            }
            this.setState({text: ''});
        }
    }

}


export default SearchBox;

Answer 1

Изменить: игнорировать. Я полностью пропустил ту часть конструктора, где вы связали методы. Хм.. Что именно говорит сообщение об ошибке?

Взгляните на третий раздел этой статьи о рефакторинге компонентов реакции на классы es6.

При использовании React.createClass({componentObjectLiteral}) синтаксис, React привязывает ваши методы объекта к экземпляру компонента, так что когда ваш _onChange метод вызывается как ваш вход onChange функция обратного вызова, this ключевое слово в вашем _onChange Метод привязан к вашему компоненту.

React не привязывает ваши методы автоматически, поэтому вы должны сделать это сами. Измените свой JSX на onChange={this._onChange.bind(this)}

Answer 2

psigns это правильно React.createClass() автоматически связывает методы с экземпляром компонента для вас. Это не тот случай, когда вы используете class синтаксис в React.

Но есть очень хорошая возможность, когда вы объединяете инициализаторы свойств с функциями стрелок:

class SearchBox extends React.Component {

  // …

 _onChange = (event, value) => {
    // …

    // this will be bound to component
    this.setState({text: event.target.value}); 
  }

  // …

}

Затем вы можете использовать метод, который вы использовали ранее в части jsx:

onChange={this._onChange}  // without .bind(this)

Я узнал об этом, прочитав отличный пост Стивена Люшера.