Question

我想在反应中去除一个函数，

import { debounce } from 'lodash';

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

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

这里有什么问题？功能甚至没有解雇。我在下面创建了一个演示

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

Answer 1

尝试：

constructor() {
    super();

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

https://codesandbox.io/s/yk421z3om9

Answer 2

在constructor中执行此操作。在您的示例中，每次单击按钮时都会创建去抖动功能。但功能应该只去掉一次。

工作示例 - 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"));

使用debounce with react不要起火功能

2 个答案: