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

但它没有用。我总是有“无法阅读财产和价值”的信息。 of null＆＃39;来自事件对象。

我在这里错过了什么吗？

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调用中声明的函数属性，而是可以将去抖动实例存储在另一个属性中，如_debouncedSearchBoxHandler

React.js和debouncing onChange事件无法正常工作

1 个答案: