ReactJS多按钮独立事件：实现对应DIV的显示隐藏

当前React代码仅能处理单个按钮的DIV显示隐藏，需要实现以下交互逻辑：

• 点击按钮时，对应DIV淡入；再次点击该按钮，对应DIV淡出
• 若已有DIV处于显示状态，点击其他按钮时，当前显示的DIV淡出，同时目标DIV淡入
• 支持后续新增任意数量的按钮及对应DIV，自动适配上述交互

原代码示例 #

const Example2: React.FC = () => {      
  const [style, setStyle] = useState("invis");

  const changeStyle = () => {
    console.log("you just clicked");

    setStyle("vis");
  };  

  return (        
    <Container className="content">                    
      <section className="section">                 
        <div className="video_section">
          <video src={videoUrl} width="" height ="" loop autoPlay muted> </video>
          <div className="video_words">
            <p><span>Video Words</span></p>
            <h1>
              <span>V</span>
              <span>I</span>
              <span>D</span>
              <span>E</span>
              <span>O</span>
            </h1> 
            <div className="TierTwo">
              <div className="Top1">
                <button type="button" onClick={changeStyle} className="Lrow1">
                  <img src="/img/image1.png" height="auto" width="auto" />                                 
                </button>
                <div className={style}>
                  <One />                                 
                </div>
                <div className={style}>
                  <Two />      
                </div>                                  
                <div className="Rrow1">
                  <button type="button" onClick={changeStyle} className="Rrow1">
                    <img src="/img/image2.png" height="auto" width="auto" />
                  </button>
                </div>
              </div>
              <div className="Top2">
                <button type="button" onClick={changeStyle} className="Lrow2">
                  <img src="/img/image3.png" height="auto" width="auto" />                                 
                </button>
                  <div className={style}>
                    <Three />                                 
                  </div>
                  <div className={style}>
                    <Four />      
                  </div>                                  
                  <div className="Rrow1">
                    <button type="button" onClick={changeStyle} className="Rrow2">
                      <img src="/img/image4.png" height="auto" width="auto" />
                    </button>
                  </div>
                </div>
                <div className="Top2">
                  ..etc..

解决方案实现 #

核心思路 #

1. 用状态管理当前活跃的DIV标识，而非统一的样式状态，精准控制单个DIV的显示/隐藏
2. 给每个按钮绑定对应DIV的唯一标识，点击时判断当前活跃状态：
   • 若点击的是当前活跃标识，清空状态实现淡出
   • 若点击的是其他标识，切换为该标识，实现旧DIV淡出、新DIV淡入
3. 通过CSS过渡属性实现平滑的淡入淡出效果

完整代码实现 #

import { useState } from 'react';
import { Container } from './你的组件路径'; // 替换为实际组件路径
import One from './One';
import Two from './Two';
import Three from './Three';
import Four from './Four';

// 按钮-对应DIV的映射配置，后续新增直接添加配置项即可
const buttonSections = [
  { id: 'section1', buttonImg: '/img/image1.png', component: <One /> },
  { id: 'section2', buttonImg: '/img/image2.png', component: <Two /> },
  { id: 'section3', buttonImg: '/img/image3.png', component: <Three /> },
  { id: 'section4', buttonImg: '/img/image4.png', component: <Four /> },
  // 新增按钮和DIV只需在这里添加新对象
];

const Example2: React.FC = () => {      
  // 存储当前活跃的区域ID，null表示无活跃区域
  const [activeSectionId, setActiveSectionId] = useState<string | null>(null);

  const handleButtonClick = (sectionId: string) => {
    // 点击当前活跃区域，取消活跃（淡出）
    if (activeSectionId === sectionId) {
      setActiveSectionId(null);
    } else {
      // 切换到新区域（旧区域淡出，新区域淡入）
      setActiveSectionId(sectionId);
    }
  };  

  return (        
    <Container className="content">                    
      <section className="section">                 
        <div className="video_section">
          <video src={videoUrl} width="" height="" loop autoPlay muted></video>
          <div className="video_words">
            <p><span>Video Words</span></p>
            <h1>
              <span>V</span>
              <span>I</span>
              <span>D</span>
              <span>E</span>
              <span>O</span>
            </h1> 
            <div className="TierTwo">
              {/* 遍历配置自动生成按钮和对应DIV，新增无需修改JSX结构 */}
              {buttonSections.map((section) => (
                <div key={section.id} className="Top1"> {/* 根据实际布局调整className */}
                  <button 
                    type="button" 
                    onClick={() => handleButtonClick(section.id)} 
                    className="Lrow1"
                  >
                    <img src={section.buttonImg} height="auto" width="auto" />                                 
                  </button>
                  <div 
                    className={activeSectionId === section.id ? 'vis' : 'invis'}
                  >
                    {section.component}                                 
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </Container>
  );
};

export default Example2;

关键CSS过渡样式 #

要实现平滑淡入淡出，需给样式类添加过渡属性：

.vis {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.invis {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

扩展说明 #

• 新增按钮和对应DIV时，仅需在buttonSections数组中添加新配置对象，无需修改组件的JSX部分，完全满足可扩展需求
• 统一的点击处理函数避免了重复代码，逻辑清晰易维护
• visibility属性确保隐藏的DIV不占用布局空间，配合opacity实现自然的过渡效果

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