（反應）用參數去抖動

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