去抖不触发功能

Question

我正在开发一个 React 组件，我希望将 debounce 绑定到输入。我的代码如下：

class Form extends React.Component {
  constructor() {
    ...
    this.deb = this.deb.bind(this);
  }
  ...

  this.deb() {
    debounce(() => { console.log('bam'); }, 400, false);
  }

  render() {
    return (
      <input
        onChange={this.deb}
        />
    )
  }
}

没有debounce in this.deb 一切正常。我能做什么？

Answer 1

debounce 会为您传入的函数创建一个新的去抖动版本，因此在这种情况下您只需在构造函数中执行一次：

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.deb = debounce(this.deb.bind(this), 400, false);
  }

  deb() {
    console.log('bam');
  }

  render() {
    return <input onChange={this.deb} />;
  }
}