如何在“lodash”函数（去抖动）回调函数中传递参数？

Question

我一直在制作一个包含两个事件的组件 (react.js)：onClick 事件和 onDoubleClick 事件。

根据 W3C 的 DOM 规范，无法区分单击事件和导致 dblclick 事件的单击事件。

所以我一直在制作一个带有条件语句的事件。

这是我的内部类组件的功能代码。

    handleClick = (e) => {
     if(!this._delayedClick) {
      this._delayedClick = _.debounce(this.onChangeTargetLabel, 200)
     }
     if(this.clickedOnce) {
      this._delayedClick.cancel()
      this.clickedOnce = false
      this.editLabel()
      console.log('doubleClick')
     } else {
      this._delayedClick(e)
      this.clickedOnce = true
      console.log('Click')
     }
    }

   onChangeTargetLabel = (e) => { // click label event
    console.log(e)
    this.clickedOnce = undefined
    const { label } = this.props
    label.onChangeTargetLabel(e.target.value)
   }

    editLabel = () => { // doubleClick label event
     const { label } = this.props
     label.editLabel()
   }

这段代码的问题是，一旦handleClick函数被执行，200ms后，debounce回调函数被执行，而回调function(this.onChangeTargetLabel)没有任何参数。

我想绑定handleClicks参数和this.onChangeTargetlabel的参数。

我该怎么做？谢谢。

Answer 1

异步使用事件不是一个好主意，因此您可以取出handleClick 函数中的value 并将其交给onChangeTargetLabel。

handleClick = e => {
  if (!this._delayedClick) {
    const { value } = event.target;
    this._delayedClick = _.debounce(this.onChangeTargetLabel.bind(this, value), 200);
  }

  // ...
};

onChangeTargetLabel = value => {
  this.clickedOnce = undefined;
  label.onChangeTargetLabel(value);
};

如果您愿意，也可以使用 setTimeout 代替去抖动函数：

class App extends React.Component {
  timeout = null;

  onClick = event => {
    if (this.timeout) {
      console.log("Double click!");
      clearTimeout(this.timeout);
      this.timeout = null;
    } else {
      console.log("click");
      this.timeout = setTimeout(() => {
        this.timeout = null;
      }, 200);
    }
  };

  render() {
    return <button onClick={this.onClick}>Click me</button>;
  }
}