React.js和反跳onChange事件不起作用

Question

我已经在更改事件上实现了react组件，如下所示：

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

或者您可以使用“ fat-arrow”函数来访问父类范围：

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

注意：我不会在componentWillMount调用中覆盖声明的function属性，而是可以将已去抖动的实例存储在另一个属性中，例如_debouncedSearchBoxHandler