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之后，将执行反跳回调函数，并且回调function(this.onChangeTargetLabel)没有任何参数。

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

我该怎么做？谢谢。

Answer 1

异步使用事件不是一个好主意，因此您可以在value函数中取出handleClick并将其提供给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>;
  }
}

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

1 个答案: