Javascript 如何在'；洛达斯'；函数（去盎司）回调函数？

我一直在制作一个组件（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

函数，200毫秒后，就会执行去盎司回调函数，回调

函数（This.onChangeTargetLabel）

没有任何参数

我想绑定

handleClicks

参数和

这个.onChangeTargetlabel

的参数

---

我该怎么做？谢谢

异步使用事件不是一个好主意，因此您可以在

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>;
  }
}

类应用程序扩展了React.Component{
超时=空；
onClick=event=>{
if（此.timeout）{
log（“双击！”）；
clearTimeout（this.timeout）；
this.timeout=null；
}否则{
控制台日志（“单击”）；
this.timeout=setTimeout（（）=>{
this.timeout=null；
}, 200);
}
};
render（）{
返回点击我；
}
}

hi。这是handleClick函数事件参数。抱歉搞混了。它不适合a吗？它工作得很好！非常感谢。我觉得我的方法太复杂了。太棒了！不客气。