在React（v16+）的现代版本中，需要传递onClick和onContextMenu prop 来检测左键和右键单击事件：

return <p onClick={handleClick} onContextMenu={handleClick}>Something</p>

您可以检查e.nativeEvent.button（如另一个答案所示），也可以检查合成事件本身的e.type。
使用e.type

const handleClick = (e) => {
  if (e.type === 'click') {
    console.log('Left click');
  } else if (e.type === 'contextmenu') {
    console.log('Right click');
  }
};

使用e.nativeEvent

const handleClick = (e) => {
  if (e.nativeEvent.button === 0) {
    console.log('Left click');
  } else if (e.nativeEvent.button === 2) {
    console.log('Right click');
  }
};

下面是一个updated demo，演示了它的工作原理。
您可能还需要阅读SyntheticEvent的React文档。

• 一个月一次 *

您正在寻找的物业是e.button或e.buttons。
触发鼠标事件时按下的按钮编号：左按钮=0，中按钮=1（如果存在），右按钮=2。

• MDN:Web/Events/click
  然而，不管有没有react，我只得到了鼠标左键（触控板）的点击事件。你可以使用onMouseDown，这对我很有效。
  这是一个使用e.buttons的demo。您可能还想在onContextMenu中阻止默认设置。

用途：

if (e.button === 0) { // or e.nativeEvent.which === 1
    // do something on left click
}

Here is a DEMO

onContextMenu={e => console.log("right-click")}

onClick={e => console.log("left-click")}

我在React's official documentation的“鼠标事件”部分找到了这个解决方案。
下面是onContextMenu的合成事件的TypeScript definition。

我用来区分左键和右键单击的方法是：

const buttons = {
  left: 0,
  middle: 1,
  right: 2,
};

export const App = () => {
  const handleChange = (e) => {
    if (e.button === buttons.left) {
      console.log('left');
    } else if (e.button === buttons.middle) {
      console.log('middle');
    } else if (e.button === buttons.right) {
      console.log('right');
    }
 };

 return (
    <div onContextMenu={(e) => e.preventDefault()} onMouseDown={handleChange}>
      Click me!
    </div>
 );
};