リアクションes6でデバウンスを実装する

Question

私は検索フォームにdebounceを実装しようとしていますが、フロントエンドフレームワークはes6を使ってreact jsです。

このデバウンス機能に関連している少数の方法は、以下のとおりです。

<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) 
    } 
/> 

：

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

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

は、私はこのように、入力フィールドonChangeプロパティにlodashデバウンスを使用して、そしてonKeyUp財産の状態を設定しています

考え方はkeyup上で、 'searchAble'と呼ばれる状態の値を設定し、onChangeはメソッドsearchを呼び出して検索を実行します。しかし、それは正しく動作していない、それはまだ検索メソッドを複数の時間を入力を完了して呼び出す。

ここには何が欠けていますか？

Answer 1

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

リポジトリを移動して、指示に従ってください。

"デフォルト値で有効になります。通知値は、デバウンス通知と同じルールに従います。したがって、Lengthが小さい場合は、 minLength - 空の値 ''が返されます。

のコード例

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