(React) 带参数的防抖函数

Question

我正在尝试使用underscore的防抖函数来防抖一个作为组件属性传递的函数。我过去曾经用以下方法实现过：

  componentWillMount() {
    this.handleInputTextChangeDebounced = debounce(() => {
      console.log('I debounce!');
    }, 250);
  },

这很好，但现在我需要从触发 handleInputTextChangeDebounced 的 onChange 中访问事件参数（以便获取输入的值）。

例如：

  <input onChange={this.handleInputTextChangeDebounced} data-option='buildNumber' />

我不能简单地使用引用，因为我有许多表单输入选项，我想与这个被防抖的函数一起使用。

我尝试将防抖作为一个函数返回到handleInputTextChangeDebounced中，该函数将接收事件，但似乎会停止防抖工作。

有什么建议吗？

- Ben

---

什么是“防抖”？它是否将传递的参数转发给其回调函数？ - zerkms

我支持@zerkms的评论。任何有用的去抖函数都应该调用您的匿名函数并传递事件。 - enjoylife

抱歉我之前没说 - 我一直在使用下划线库的防抖函数http://underscorejs.org/#debounce - Ben

如果我尝试使用防抖传递参数 debounce((e) => {，我会得到合成事件对象，但所有属性都为 null。 - Ben

Answer 1

找到了一种使用两个步骤的解决方案。我调用了一个普通类函数(handleInputTextChange)，从输入字段中提取了值，然后单独调用了防抖函数(handleInputTextChangeDebounced)。

handleInputTextChange(e) {
  this.handleInputTextChangeDebounced(e.target.value);
},

handleInputTextChangeDebounced: debounce((value) => {
  // do debounced stuff with value here...
}, 700),


<input onChange={this.handleInputTextChange} type='text' data-option='buildNumber' />

- Ben