（反应）用参数去抖动

Question

我试图去抖动作为道具传递给组件的函数（使用下划线的去抖动）。 我过去可以做到以下几点：

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

那很好并且很花哨，但是现在我需要从onChange上访问事件参数（这样我就可以从输入中获取值），它会触发handleInputTextChangeDebounced

例如：

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

我不能简单地使用ref，因为我有很多要与thise debounced函数一起使用的表单输入选项。

我试图将debounce作为handleInputTextChangeDebounced中的函数返回，该函数将接收该事件，但这似乎阻止了反跳工作。

建议？

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' />