如何通过自定义按钮切换details标签？React场景实现求助

问题分析 #

你的代码中，标题点击能切换是因为它在summary内部，而summary是原生details组件的触发元素；但按钮点击无效可能是事件冒泡逻辑导致，且你希望只有按钮能触发切换、标题不能。下面是满足需求的实现方案：

解决方案代码 #

import * as React from "react";
import "./styles.css";

export default function App() {
  const detailsRef = React.useRef(null);
  const buttonRef = React.useRef(null);

  React.useEffect(() => {
    const details = detailsRef.current;
    const button = buttonRef.current;

    // 更新按钮文本的函数
    const updateButtonText = () => {
      button.textContent = details.open ? "Close" : "Open";
    };

    // 初始化按钮文本
    updateButtonText();

    // 监听details的toggle事件，同步按钮文本
    details.addEventListener("toggle", updateButtonText);

    // 组件卸载时移除监听
    return () => {
      details.removeEventListener("toggle", updateButtonText);
    };
  }, []);

  // 阻止标题点击时触发summary的切换
  const handleTitleClick = (e) => {
    e.stopPropagation();
  };

  // 按钮点击时切换details的状态
  const handleButtonClick = () => {
    detailsRef.current.open = !detailsRef.current.open;
  };

  return (
    <details ref={detailsRef}>
      <summary style={{ listStyleType: "none" }}>
        <h5 onClick={handleTitleClick}>Title</h5>
        <button ref={buttonRef} onClick={handleButtonClick}>Open</button>
      </summary>
      <div>Content</div>
    </details>
  );
}

关键说明 #

• 阻止标题触发切换：通过e.stopPropagation()阻止标题的点击事件冒泡到summary，点击标题不会触发details的展开/收起。
• 按钮控制状态：使用useRef获取details元素的DOM引用，直接修改其open属性切换状态，无需React状态变量。
• 同步按钮文本：监听details的toggle事件（无论通过按钮还是键盘操作触发），自动更新按钮显示的文本，保持状态一致。
• 保留可访问性：原生details组件的键盘操作（如回车、空格）依然有效，不会破坏可访问性。

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