React.js и дребезг OnChange событие не работает

Question

Я осуществил реакцию компоненты на событии изменения, как это:

NewItem = React.createClass({ 

    componentWillMount: function() { 
    this._searchBoxHandler = debounce(this._searchBoxHandler, 500); 
    }, 

    _searchBoxHandler: function(event) { 
    this.context.flux.getActions('order').setOrders(...); 
    }, 

    render: function() { 
    ... 
    var _self = this; 
    return (<TextField onChange={_self._searchBoxHandler} />)  
    }) 

}); 

Я сделал это РЕАЛИЗАЦИЮ, проверяя этот ответ (Хорошая идею раздел): https://stackoverflow.com/a/28046731/842622

Но это не работает. У меня всегда есть значение «Невозможно прочитать свойство» значения null из объекта события.

Я что-то упустил?

Answer 1

Вы должны связать свой контекст или использовать замыкание для поддержания обзорного:

NewItem = React.createClass({ 
 

 
    componentWillMount: function() { 
 
    this._searchBoxHandler = debounce(this._searchBoxHandler.bind(this), 500); 
 
    }, 
 

 
    _searchBoxHandler: function(event) { 
 
    this.context.flux.getActions('order').setOrders(...); 
 
    }, 
 

 
    render: function() { 
 
    ... 
 
    var _self = this; 
 
    return (<TextField onChange={_self._searchBoxHandler} />)  
 
    }) 
 

 
});

Распространенная ошибка для новых программистов JavaScript, чтобы извлечь метод из объекта, то чтобы позже вызвать эту функцию и ожидать, что она будет использовать исходный объект в качестве его (например, используя этот метод в коде на основе обратного вызова). Однако без особой осторожности исходный объект обычно теряется. Создание связанной функции из функции, используя исходный объект, аккуратно решает эту проблему .. - MDN

Некоторых хороших документы на связывании и контексте: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

или вы можете использовать «жир стрелок 'функции для доступа родительского класса сферы:

debounce((event) => { this._searchBoxHandler(event); }, 500);

Примечание: Я бы не перезаписать заявленную функцию свойства в componentWillMount и ocation, вместо этого вы можете сохранить деблокированный экземпляр в другом свойстве, таком как _debouncedSearchBoxHandler