React点击单个区块展开时如何实现其余区块自动关闭

实现思路 #

你当前为每个区块单独定义了独立的布尔状态，状态之间没有联动关系，所以无法实现点击一个区块时自动关闭其他已展开区块的效果。我们可以把状态调整为存储当前激活的区块唯一标识，替代原来的多个独立开关状态，就能实现互斥展开的效果。

完整修改后代码 #

import { useState } from 'react';

function App() {
  // 状态存储当前激活的区块ID，null表示没有区块展开
  const [activeBlock, setActiveBlock] = useState(null)

  // 统一的点击处理函数，接收当前点击的区块ID作为参数
  const handleBlockClick = (blockId) => {
    // 如果点击的是已经展开的区块，就关闭，否则切换为点击的区块
    setActiveBlock(prev => prev === blockId ? null : blockId)
  }

  return (
    <div className="App">
      <div onClick={() => handleBlockClick('block1')}>block one</div>
      {activeBlock === 'block1' && <input/>}
      
      <div onClick={() => handleBlockClick('block2')}>block two</div>
      {activeBlock === 'block2' && <input/>}
      
      {/* 后续如果新增区块，只需要加对应ID的项即可，不用额外加状态 */}
    </div>
  );
}

逻辑说明 #

• 所有区块共用同一个激活状态变量，每次点击只会更新为当前点击的区块ID，其余区块自然不满足activeBlock === 自身ID的渲染条件，自动隐藏
• 上述代码保留了「点击已展开的区块可以关闭当前区块」的交互，如果不需要这个交互，直接把handleBlockClick里的逻辑改成setActiveBlock(blockId)即可

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