javascript - 在React es6中实现去抖

Question

我正在尝试以搜索形式实现去抖，前端框架是react js，使用es6。

与此去抖功能相关的几个方法是:

handleSearchForm( event ) {
  this.setState( {
    searchAble: event.target.value
  } )
}

search() {
  console.log( this.state.searchAble )
}

我在输入字段 onChange 属性中使用 lodash debounce，并在 onKeyUp 属性中设置状态，如下所示:

<input type="text" className="form-control input-sm" placeholder="Search item by SKU, Price, Title etc..."
  onKeyUp={ this.handleSearchForm.bind( this ) }
  onChange={
    _.debounce( () => {
      this.search( this )
    }, 2050 ).bind( this )
  }
/>

所以这个想法是在 keyup 上它将设置名为“searchAble”的状态值，而 onChange 将调用方法 search 来执行搜索。但它无法正常工作，它仍然多次调用搜索方法来完成输入。

我在这里缺少什么？

Answer 1

https://github.com/nkbt/react-debounce-input

请转到存储库并按照说明进行操作。我认为这可能对您有帮助并记住一件事

“通过按 Enter 键将立即发送当前值的通知。默认情况下启用。通知值遵循与去抖通知相同的规则，因此如果长度较小，则将发回 minLength - 空值 '' ”

示例代码

  <DebounceInput
  type="number"
  onChange={event => this.setState({value: event.target.value})}
  placeholder="Name"
  className="user-name" 
/>