Utilisation du débordement avec la fonction "react don't fire".

Question

Je veux désamorcer une fonction dans react,

import { debounce } from 'lodash';

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

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

Qu'est-ce qui ne va pas ici ? La fonction n'est même pas lancée. J'ai créé une démo ci-dessous

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

Answer 1

Essayez :

constructor() {
    super();

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

https://codesandbox.io/s/yk421z3om9

Answer 2

Faites-le dans le constructor . Dans votre exemple, vous créez une fonction débondée chaque fois que vous cliquez sur le bouton. Mais la fonction ne devrait être débitée qu'une seule fois.

Exemple de travail - https://codesandbox.io/s/rr6w91p3wo (ouvrez la console et essayez de cliquer sur les boutons).

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"));