仅隐藏点击按钮关联的表格而非全部表格的实现问题

你的核心问题在于当前代码通过document.querySelectorAll("div[class*='MuiDataGrid-root']")获取了页面上所有符合条件的表格元素，随后统一设置隐藏，导致点击任意按钮都会隐藏全部表格。要实现仅隐藏关联表格，可通过以下两种方式解决：

方案一：基于DOM结构关联查找（直接操作DOM） #

如果按钮和对应表格在DOM结构上存在明确关联（比如同属一个父容器、是兄弟元素等），可以通过点击事件的目标元素，精准定位到关联表格：

const handleTitleClick = (e) => {
  // 获取当前点击的按钮（用currentTarget确保拿到绑定事件的元素，而非子元素）
  const clickedButton = e.currentTarget;
  
  // 示例1：假设按钮和表格同属一个名为table-group的父容器
  const targetTable = clickedButton.closest('.table-group').querySelector("div[class*='MuiDataGrid-root']");
  
  // 示例2：如果表格是按钮的下一个直接兄弟元素，可直接用
  // const targetTable = clickedButton.nextElementSibling;

  if (targetTable) {
    // 切换显示/隐藏状态，而非仅隐藏
    targetTable.style.display = targetTable.style.display === 'none' ? 'block' : 'none';
  }
};

方案二：React状态管理（推荐，符合React数据驱动理念） #

React不建议直接操作DOM，更推荐通过状态控制视图显示。给每个表格绑定独立的状态，点击按钮时仅修改对应表格的状态：

function YourComponent() {
  // 用状态数组管理每个表格的显示状态，根据实际表格数量初始化
  const [tableVisibility, setTableVisibility] = React.useState([true, true, true]);

  const handleTitleClick = (index) => {
    // 更新对应索引的表格显示状态
    setTableVisibility(prevState => {
      const newState = [...prevState];
      newState[index] = !newState[index];
      return newState;
    });
  };

  return (
    <div>
      {/* 遍历生成按钮和表格组 */}
      {tableVisibility.map((isVisible, index) => (
        <div key={index} className="table-group">
          <button onClick={() => handleTitleClick(index)}>
            {isVisible ? '隐藏表格' : '显示表格'}
          </button>
          {/* 通过style控制表格显示，无需直接操作DOM */}
          <div 
            className="MuiDataGrid-root" 
            style={{ display: isVisible ? 'block' : 'none' }}
          >
            {/* 表格内容 */}
          </div>
        </div>
      ))}
    </div>
  );
}

原代码问题说明 #

原代码中document.querySelectorAll会选中页面所有匹配的表格元素，rowArr.map遍历后统一设置display: none，自然会导致所有表格被隐藏。只有建立按钮和表格的一对一关联，才能实现精准控制。

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