html - 无法将 onClick 事件添加到 标记 React

Question

我有一个侧边栏，当我点击一个按钮时打开，我有 <li>那里的元素。

我想为这些元素添加一个 onCLick 事件，但是，当页面加载时以及我单击 <nav className={drawClass}> 时会触发 onClick 事件。元素。

任何信息都有帮助，谢谢。

const Sidedraw = props => {
  let drawClass = "sideDraw";
  if (props.show) {
    drawClass = "sideDraw open";
  }
  return (
    <nav className={drawClass}>
      <ul>
        <li className="matches" onclick={console.log("work work")}>
          Pro matches
        </li>
        <li className="matches">Public mathes</li>
        <li className="matches">Players</li>
        <li className="matches">Teams</li>
      </ul>
    </nav>
  );
};

Answer 1

正如其他人提到的，onClick 应该是一个函数引用。

此外，您可能会收到有关当前代码的警告:

Non-interactive elements should not be assigned mouse or keyboard event listeners

您应该在列表项中放置一个交互元素( anchor 、按钮等)。

<ul>
  <li className="matches">
    <button onClick={() => console.log('work work')}>Pro matches</button>
  </li>
  <li className="matches">Public mathes</li>
  <li className="matches">Players</li>
  <li className="matches">Teams</li>
</ul>