React子组件点击无响应求助：标题工具栏按钮失效

问题原因分析 #

工具栏按钮无法触发点击，通常是两个核心问题导致：

• 工具栏的层级低于Title的输入区域，按钮被上层元素遮挡
• 点击按钮时事件冒泡到父组件Title，触发了工具栏的显示/隐藏切换，导致按钮点击逻辑无法正常执行

具体解决方案 #

1. 提升工具栏层级，避免被遮挡 #

修改TitleToolbar组件的Box样式，添加zIndex: 1确保工具栏显示在Title输入元素上层：

import { Box, Button } from "@mui/material";
import React from "react";

function TitleToolbar({ clickOnBold }) {
  return (
    <Box
      className="title-toolbar"
      sx={{
        background: "#c0e1eb",
        height: "40px",
        width: "100%",
        position: "absolute",
        textAlign: "left",
        top: "0px",
        left: "0px",
        zIndex: 1 // 新增：提升层级，避免被遮挡
      }}
    >
      <Button onClick={(e) => {
        e.stopPropagation();
        clickOnBold();
      }}>B</Button>
      <Button onClick={(e) => {
        e.stopPropagation();
        // 此处添加下划线功能逻辑
      }}> U</Button>
    </Box>
  );
}

export default TitleToolbar;

2. 阻止按钮事件冒泡 #

在每个按钮的点击事件中调用e.stopPropagation()，避免点击按钮时触发父组件Title的点击事件，导致工具栏意外隐藏。

3. 优化Title组件的点击逻辑（可选） #

在Title组件的点击处理函数中，判断点击目标是否属于工具栏，若是则不执行显示/隐藏切换：

const handleTitleClick = (e) => {
  // 检查点击元素是否属于工具栏区域
  if (e.target.closest('.title-toolbar')) {
    return;
  }
  setShowToolbar(prev => !prev);
};

完成以上修改后，工具栏按钮即可正常响应点击，同时Title组件的显示/隐藏逻辑也能正常工作。

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