Обработайте React onDoubleClick и одиночный onClick для одного и того же элемента

Question

Когда я добавляю одно событие onClick к элементу, а также событие onDoubleClick к тому же элементу, одиночный щелчок также запускается при двойном щелчке. Я хотел бы отделить это, чтобы только одно событие было запущено для одного или двух. Я нашел несколько примеров в 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>
 }

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

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/