React侧边栏点击时onClick事件未触发问题求助

看起来你遇到的核心问题是事件没有正确传递和绑定，咱们一步步来排查和修复：

核心问题点 #

1. SideBar组件未正确接收并使用props：你在Layout里给SideBar传了onClick，但SideBar组件既没接收这个props，也没把事件绑定到任何可点击的元素上。另外React组件名必须首字母大写（你的sideBar应该改成SideBar，避免和原生DOM元素混淆）。
2. 事件未传递到内部子组件：如果你希望侧边栏内的所有元素（导航链接、按钮、Logo等）都能触发事件，需要把事件要么绑定到SideBar的根容器，要么传递给内部的NavigationItems等子组件。

具体修复步骤 #

步骤1：修正SideBar组件的定义与事件绑定 #

首先把组件名改成首字母大写，接收props，并把传入的onClick绑定到根容器（这样点击侧边栏任意区域都会触发事件），同时把事件传递给NavigationItems：

import React from 'react';
import classes from './SideBar.module.scss';
import Logo from '../Logo/Logo'
import NavigationItems from './NavigationItems/NavigationItems'

// 组件名首字母大写，接收props
const SideBar = (props) => { 
  return (
   // 把onClick绑定到根div，触发事件冒泡
   <div className={classes.SideBar} onClick={props.onClick}>
    <Logo />
    <nav>
     {/* 把事件传递给NavigationItems，让内部元素也能触发 */}
     <NavigationItems clicked={props.onClick} />
    </nav>
   </div>
  );
};

export default SideBar;

步骤2：处理NavigationItems内的可点击元素 #

你的NavigationItems里有<a>标签（默认会跳转页面）和按钮，需要给这些元素绑定事件并阻止默认跳转行为：

const navigationItems = (props) => {
  // 统一处理导航链接的点击事件
  const handleNavLinkClick = (e) => {
    e.preventDefault(); // 阻止a标签的默认跳转行为
    props.clicked(); // 触发传递过来的事件
  };

  return (
   <Aux>
    <p>CONSUMER</p>
    <ul className={classes.NavigationItems}>
     {/* 给每个导航链接绑定点击事件 */}
     <li><a href="/" onClick={handleNavLinkClick}><FontAwesomeIcon className={classes.Icon1Paddig} icon="home" /> Home</a></li>
     <li><a href="/" onClick={handleNavLinkClick}><FontAwesomeIcon className={classes.Icon2Paddig} icon="file-alt" /> Dashboard</a></li>
     <li><a href="/" onClick={handleNavLinkClick}><FontAwesomeIcon className={classes.Icon3Paddig} icon="chart-line" /> Statistics</a></li>
    </ul>
    <div className={classes.Divider}></div>
    <div className={classes.ButtonPosition}>
     {/* 按钮已经绑定了props.clicked，现在会正常触发 */}
     <button onClick={props.clicked}><img className={classes.CollapseIcon} src={CollapseIcon} alt='icon'></img>Collapse sidebar</button>
    </div>
    <div className={classes.Divider + ' ' + classes.DividerBottom}></div>
    <p className={classes.footer}>Micheal Alfa v 1.0.0</p>
    <p className={classes.footer}>Copyrights @ 2019 All Rights Reserved</p>
   </Aux>
  );
};

可选：阻止特定元素的事件冒泡 #

如果某些元素（比如Logo）你不想触发这个事件，可以给它添加stopPropagation来阻止冒泡：

<Logo onClick={(e) => e.stopPropagation()} />

内容的提问来源于stack exchange，提问作者Lamis Abouzina