这不是 React 的限制，而是 DOMclick和dblclick事件的限制。正如 Quirksmode 的点击文档所建议的：

不要在同一个元素上注册 click 和 dblclick 事件：无法区分单击事件和导致 dblclick 事件的单击事件。

有关更多最新文档，有关该dblclick事件的 W3C 规范指出：

当指针设备的主按钮在元素上单击两次时，用户代理必须调度此事件。

双击事件必然发生在两次单击事件之后。

编辑：

另一种建议阅读是 jQuery 的dblclick处理程序：

不建议将处理程序绑定到同一元素的 click 和 dblclick 事件。触发事件的顺序因浏览器而异，有些在 dblclick 之前收到两个点击事件，而其他只收到一个。双击灵敏度（被检测为双击的最大点击间隔时间）可能因操作系统和浏览器而异，并且通常是用户可配置的。

可以通过在触发正常单击操作时提供非常轻微的延迟来实现所需的结果，该操作将在双击事件发生时取消。

  let timer = 0;
  let delay = 200;
  let prevent = false;

  doClickAction() {
    console.log(' click');
  }
  doDoubleClickAction() {
    console.log('Double Click')
  }
  handleClick() {
    let me = this;
    timer = setTimeout(function() {
      if (!prevent) {
        me.doClickAction();
      }
      prevent = false;
    }, delay);
  }
  handleDoubleClick(){
    clearTimeout(timer);
    prevent = true;
    this.doDoubleClickAction();
  }
 < button onClick={this.handleClick.bind(this)} 
    onDoubleClick = {this.handleDoubleClick.bind(this)} > click me </button>

您可以使用自定义钩子来处理简单的单击和双击，如下所示：

import { useState, useEffect } from 'react';

function useSingleAndDoubleClick(actionSimpleClick, actionDoubleClick, delay = 250) {
    const [click, setClick] = useState(0);

    useEffect(() => {
        const timer = setTimeout(() => {
            // simple click
            if (click === 1) actionSimpleClick();
            setClick(0);
        }, delay);

        // the duration between this click and the previous one
        // is less than the value of delay = double-click
        if (click === 2) actionDoubleClick();

        return () => clearTimeout(timer);
        
    }, [click]);

    return () => setClick(prev => prev + 1);
}

然后在您的组件中，您可以使用：

const click = useSingleAndDoubleClick(callbackClick, callbackDoubleClick);
<button onClick={click}>clic</button>

编辑：

我发现这不是 React 0.15.3 的问题。

原来的：

对于 React 0.13.3，这里有两个解决方案。

1. ref 回调

请注意，即使在双击的情况下，单击处理程序也会被调用两次（每次单击一次）。

const ListItem = React.createClass({

  handleClick() {
    console.log('single click');
  },

  handleDoubleClick() {
    console.log('double click');
  },

  refCallback(item) {
    if (item) {
      item.getDOMNode().ondblclick = this.handleDoubleClick;
    }
  },

  render() {
    return (
      <div onClick={this.handleClick}
           ref={this.refCallback}>
      </div>
    );
  }
});

module.exports = ListItem;

2. lodash 去抖动

我有另一个使用 的解决方案lodash，但由于复杂性我放弃了它。这样做的好处是“click”只被调用一次，而在“double-click”的情况下根本不调用。

import _ from 'lodash'

const ListItem = React.createClass({

  handleClick(e) {
    if (!this._delayedClick) {
      this._delayedClick = _.debounce(this.doClick, 500);
    }
    if (this.clickedOnce) {
      this._delayedClick.cancel();
      this.clickedOnce = false;
      console.log('double click');
    } else {
      this._delayedClick(e);
      this.clickedOnce = true;
    }
  },

  doClick(e) {
    this.clickedOnce = undefined;
    console.log('single click');
  },

  render() {
    return (
      <div onClick={this.handleClick}>
      </div>
    );
  }
});

module.exports = ListItem;

在肥皂盒上

我很欣赏的想法，双击是不容易发现的东西，但是是好还是坏它IS存在和一个用户理解，因为它在操作系统中流行的一个范例。此外，它是现代浏览器仍然支持的范例。在它从 DOM 规范中删除之前，我的观点是 React 应该支持一个功能性的onDoubleClickprop 和onClick. 不幸的是，他们似乎没有。

ondoubleclick您可以使用event.detail来获取当前点击次数，而不是使用。它是鼠标在短时间内在同一区域被点击的次数。

const handleClick = (e) => {
  switch (e.detail) {
    case 1:
      console.log("click");
      break;
    case 2:
      console.log("double click");
      break;
    case 3:
      console.log("triple click");
      break;
  }
};

return <button onClick={handleClick}>Click me</button>;

在上面的示例中，如果您三次单击该按钮，它将打印所有 3 个案例：

click 
double click 
triple click 

现场演示