ReactJS开发中汉堡菜单点击关闭按钮无响应无法关闭问题求助

问题原因 #

React 合成事件遵循驼峰命名规范，你在CustomClose组件上绑定的是全小写的onclick，不会被 React 识别为点击事件回调，因此点击关闭按钮时不会触发修改burgerStatus的逻辑。

修复方法 #

将CustomClose标签上的onclick修改为驼峰格式的onClick即可，修改后代码如下：

<CloseWrapper> 
     <CustomClose onClick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>

可选排查项 #

如果修改后仍无法正常关闭，可逐一检查以下配置：

• 确认自定义组件CustomClose内部透传了onClick属性到根DOM节点：如果CustomClose是你自己封装的组件，需要显式将传入的onClick属性绑定到内部可点击的元素上，示例如下：

  const CustomClose = (props) => {
    // 内部必须把props.onClick绑定给真实可点击元素
    return <div className="close-icon" onClick={props.onClick} />
  }
  

• 确认BurgerNav的transform样式没有被其他更高优先级的CSS规则覆盖：可打开浏览器开发者工具的元素面板，查看burgerStatus为false时，BurgerNav元素的计算样式中transform属性是否为translateX(100%)。

内容的提问来源于stack exchange，提问作者Anietie Godswill