使用デバウンス発生しません反応する機能

Question

私が反応で機能をデバウンスしたい

、ここで間違っている何

import { debounce } from 'lodash'; 

<button onClick={this.handleClickDebounce}>Debounce click</button> 

handleClickDebounce =() => { 
    debounce(this.fire_something, 500); 
    }; 

？機能も発射されませんでした。 constructorでそれを行う

constructor() { 
    super(); 

    this.handleClickDebounce = debounce(this.handleClick, 500) 
} 

https://codesandbox.io/s/yk421z3om9

Answer 1

下回るてみてくださいデモを作成しました。あなたの例では、ボタンをクリックするたびにデバッグ機能を作成します。しかし、機能は一度だけデバウンスされるべきです。

の作業例 - https://codesandbox.io/s/rr6w91p3wo

class App extends Component { 
    constructor() { 
    super(); 

    this.handleClickDebounce = debounce(this.handleClick, 500); 
    } 

    handleClick =() => { 
    this.fire_something(); 
    }; 

    fire_something =() => { 
    console.log("fire"); 
    }; 

    render() { 
    return (
     <div> 
     <button onClick={this.handleClick}>Normal click</button> 
     <br /> 
     <button onClick={this.handleClickDebounce}>Debounce click</button> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById("root")); 

Answer 2

：私は

https://codesandbox.io/s/1r4k3r2z8l