我想创建电子应用程序的布局像VS代码，但当我创建它，我不能点击按钮，onClick方法不响应：

你看到onClick触发器，它没有响应：

import classNames from "classnames";
import React from 'react'

import "@vscode/codicons/dist/codicon.css";
import styles from "./header.module.css";

export type TitlebarProps = {
  showPanel: boolean;
  showPrimarySideBar: boolean;
  showSecondarySideBar: boolean;
  onShowPanelChanged: (visible: boolean) => void;
  onShowPrimarySideBarChanged: (visible: boolean) => void;
  onShowSecondarySidebarChanged: (visible: boolean) => void;
};

function header(
  {
    showPanel,
    showPrimarySideBar,
    showSecondarySideBar,
    onShowPanelChanged,
    onShowPrimarySideBarChanged,
    onShowSecondarySidebarChanged,
  }: TitlebarProps
) {
  return (
    <div className={styles.titlebar}>
       <div className={styles.layoutControls}>
        <ul className={styles.actionsContainer}>
          <li>
            <a
              className={classNames(
                "codicon",
                showPrimarySideBar
                  ? "codicon-layout-sidebar-left"
                  : "codicon-layout-sidebar-left-off",
                styles.actionLabel
              )}
              role="button"
              aria-label="Toggle Primary Side Bar (⌘B)"
              title=""
              tab-index="0"
              onClick={() => {
                console.log('mk')
                onShowPrimarySideBarChanged(!showPrimarySideBar)
              }}
            ></a>
          </li>
          <li>
            <a
              className={classNames(
                "codicon",
                showPanel ? "codicon-layout-panel" : "codicon-layout-panel-off",
                styles.actionLabel
              )}
              role="button"
              aria-label="Toggle Primary Side Bar (⌘B)"
              title=""
              tab-index="0"
              onClick={() => onShowPanelChanged(!showPanel)}
            ></a>
          </li>
          <li>
            <a
              className={classNames(
                "codicon",
                showSecondarySideBar
                  ? "codicon-layout-sidebar-right"
                  : "codicon-layout-sidebar-right-off",
                styles.actionLabel
              )}
              role="button"
              aria-label="Toggle Primary Panel (⌘.)"
              title=""
              tab-index="0"
              onClick={() =>
                onShowSecondarySidebarChanged(!showSecondarySideBar)
              }
            ></a>
          </li>
          <li>
            <a
              className={classNames(
                "codicon codicon-layout",
                styles.actionLabel
              )}
              role="button"
              aria-label="Toggle Secondary Side Bar"
              title=""
              tab-index="0"
              onClick= {
                () => { console.log(111) }
              }
            ></a>
          </li>
        </ul>
      </div>
    </div>
  )
}

export default header

完整的Electron项目代码如下：https://codesandbox.io/s/pfcp43
我尝试使用下面的代码来防止默认事件，但不幸运。

onClick={(e) => {
                //console.log(e)
                e.preventDefault()
                console.log('mk')
                onShowPrimarySideBarChanged(!showPrimarySideBar)
              }}

我用关键代码创建了一个react demo，它运行得很好：
代码和框：https://codesandbox.io/s/clwpf6
所以，不同的是上面的问题演示是一个电子框架。