React.js中onDoubleClick与onClick冲突怎么解决？

Question

在一个<div>中，想要共存单击事件与双击事件，
react.js中分别有单击和双击事件的方法，即onClick和onDoubleClick,
但是我将这两个事件同时写在一个div上时，点击只会触发单击事件，
如果只写onDoubleClick是可以触发双击事件的，所以应该怎么实现在一个div中同时绑定单击与双击事件？

Answer 1

不要同时绑定这两个事件，只绑定单击事件，在单击事件的监听方法中，通过setTimeout()设置一个延时200ms,并通过一个标志位变量count记录当前点击次数，如果在200ms内，再次点击，count++。当setTimeout中的延时函数执行时，判断count值，1是单击，2是双击，然后执行对应的逻辑。

Answer 2

Talk is cheap show you the code!

let count = 0;
class App extends Component {
    onClick = () => {
        count += 1;
        setTimeout(() => {
          if (count === 1) {
            console.log('single click: ', count);
          } else if (count === 2) {
            console.log('setTimeout onDoubleClick: ', count);
          }
          count = 0;
        }, 300);
    }
    
    render(){
        return (...)
    }
}

再加个 else if (count === 3) 还能实现 3 击。

还有个办法，使用 lodash 的 debounce，区别是同时监听 onCick 和 onDoubleClick

let clickTasks = [];

class App extends Component {

    onClick()=>{
        const clickTask = _.debounce(() => {
          const { width } = this.state;
          this.setState({
            dragging: true,
            startMoveX: evt.pageX,
            startMoveY: evt.pageY,
            startWidth: width,
            resizeDirection,
          });
          clickTasks = [];
        }, 200);
        clickTasks.push(clickTask);
        clickTask();
    }

  handleDoubleClick = () => {
    if (clickTasks.length > 0) {
      _.map(clickTasks, (task) => task.cancel());
    }
    console.log('handleDoubleClick');
  }

    render(){
            return (...)
        }
    }
}