处理React中同一元素的双击和单击事件

Question

当我给一个元素添加单击事件和双击事件时，单击事件也会在双击时触发。我希望将它们分开，只有单击或双击时才触发一个事件。我在jQuery中找到了一些示例，但我想要一个React的清晰函数。 结果:

当我给一个元素同时添加单击事件和双击事件时，双击操作会触发单击事件。我希望将它们分离开来，只有单击或双击时才触发一个事件。我在 jQuery 中找到了一些示例，但我想要一个干净的 React 函数。

 handleClick = () => {
   console.log('only fire click')
 }

 handleDoubleClick = () => {
   console.log('only fire double click')
 }

 render () {
  return <Element 
             onClick={evt => this.handleClick}
             onDoubleClick={evt => this.handleDoubleClick} 
         ></Element>
 }

- Sean

Answer 1

基于我在jquery中找到的其他片段，我创建了这个简单的函数来根据点击生成正确的事件。希望这能对其他React开发者有所帮助。

componentWillMount = props => {
  this.clickTimeout = null
}

handleClicks = () => {
  if (this.clickTimeout !== null) {
    console.log('double click executes')
    clearTimeout(this.clickTimeout)
    this.clickTimeout = null
  } else {
    console.log('single click')  
    this.clickTimeout = setTimeout(()=>{
    console.log('first click executes ')
    clearTimeout(this.clickTimeout)
      this.clickTimeout = null
    }, 2000)
  }
}

render () {
  return <Element 
             onClick={evt => this.handleClicks}
         ></Element>
}

- Sean

Answer 2

我希望下面的代码可以帮助您触发单击和双击事件：

constructor(props){
  super(props);
  this.clickCount = 0;
  this.singleClickTimer = '';
}

singleClick = () => {
    console.log('only fire click')
}

handleDoubleClick = () => {
    console.log('only fire double click')
}
handleClicks(){
    this.clickCount++;
  if (this.clickCount === 1) {
    this.singleClickTimer = setTimeout(function() {
      this.clickCount = 0;
      this.singleClick();
    }.bind(this), 300);

  } else if (this.clickCount === 2) {
    clearTimeout(this.singleClickTimer);
    this.clickCount = 0;
    this.handleDoubleClick();
  }
}
render () {
  return <Element 
             onClick={() => this.handleClicks()} 
         ></Element>
 }

以下是参考资料：https://jsfiddle.net/69z2wepo/130223/

- Selvarani

---

这很有帮助，谢谢 - 但我发现我需要在setTimeout之前调用this.singleClick()，否则单击函数的效果也会被延迟。 - skwidbreth