在反应中使用多个“ onContextMenu”

Question

我正在使用React进行扫雷游戏，用户应使用左键单击以显示图块内容，并使用左键在图块上设置标记。

我使用钩子创建一个Tile组件来处理每个tile的状态，并将它们附加到onClick和onContextMenu上以更新tile的状态。

const Tile = ({ ...props }) => {
  const [discovered, setDiscovered] = useState(false);
  const [flag, setFlagState] = useState(null);

  const incrementFlag =  (e) => {
    e.preventDefault();
    switch (flag) {
      case null:
        setFlagState(1)        
        break;
      default:
        setFlagState(null)
        break;
    }
  }
  return (<td 
           onClick={() => setDiscovered(true)} 
           onContextMenu={incrementFlag} 
           style={{ backgroundColor: discovered ? "#ccc# : '#aaa' }} 
           {...props} >
           {flag}
         </td>)

当我在瓷砖上单击鼠标左键时，其颜色会发生变化，因此onClick正常工作。

但是无论何时在onContextMenu函数上调用鼠标右键，它都会更新第一个图块的状态