在反應es6中實現去抖動

我試圖在搜索表單中實現去抖動，前端框架是反應js，使用es6。在反應es6中實現去抖動

是與此相關的防抖動功能，很少有方法是：

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

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

我使用lodash去抖輸入字段onChange財產，並在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來執行搜索。但它的工作不正常，它仍然多次調用搜索方法來完成類型。

我在這裏失蹤了什麼？

來源

2017-04-17 rakibtg

你approcah是錯誤的。不需要2種不同的方法。 – Ved

@Ved任何例子？ – rakibtg

當然。我發佈了一個答案。 – Ved

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

來源

2017-04-17 07:54:30

它的工作原理，謝謝。 – rakibtg

在反應es6中實現去抖動

回答

相關問題