如何编程式批量关闭HeadlessUI的所有Disclosure组件

你当前使用defaultOpen属性时，Disclosure处于非受控模式，开闭状态完全由组件自身维护，外部没有直接访问和修改状态的入口，这是无法直接实现全局关闭的核心原因。有两种成熟的实现方案可选：

• 方案一：使用受控模式（官方推荐，稳定性最高）
  放弃defaultOpen的非受控写法，改用组件提供的open和onChange属性，将所有Disclosure的开闭状态统一托管到父组件，即可同时支持单个面板切换、全局批量关闭/展开等操作。

  import { useState } from 'react'
  import { Disclosure } from '@headlessui/react'
  
  export default function DisclosureGroup() {
    // 初始化状态：10个面板默认全部展开
    const [openStates, setOpenStates] = useState(Array(10).fill(true))
  
    // 批量关闭所有面板
    const handleCloseAll = () => {
      setOpenStates(Array(10).fill(false))
    }
  
    // 切换单个面板的开闭状态
    const handleToggleSingle = (targetIndex) => {
      setOpenStates(prev => 
        prev.map((state, index) => index === targetIndex ? !state : state)
      )
    }
  
    return (
      <div className="p-4">
        <button onClick={handleCloseAll}>Close All</button>
        {openStates.map((isOpen, index) => (
          <Disclosure 
            key={index} 
            open={isOpen} 
            onChange={() => handleToggleSingle(index)}
          >
            <Disclosure.Button className="py-2">Open/Close</Disclosure.Button>
            <Disclosure.Panel className="text-gray-500">
              <p>disclosure{index + 1}</p>
            </Disclosure.Panel>
          </Disclosure>
        ))}
      </div>
    )
  }
  

• 方案二：Ref触发点击（适合老代码快速改造）
  如果不想改动现有非受控的逻辑，可以给每个Disclosure.Button挂载ref，点击全局关闭按钮时，遍历所有ref，对当前处于展开状态的面板触发按钮点击事件，即可实现批量关闭。

  import { useRef } from 'react'
  import { Disclosure } from '@headlessui/react'
  
  export default function DisclosureGroup() {
    const buttonRefs = useRef([])
  
    const handleCloseAll = () => {
      buttonRefs.current.forEach(btn => {
        // 通过组件自带的aria-expanded属性判断当前展开状态，避免重复点击
        if (btn?.getAttribute('aria-expanded') === 'true') {
          btn.click()
        }
      })
    }
  
    return (
      <div className="p-4">
        <button onClick={handleCloseAll}>Close All</button>
  
        <Disclosure defaultOpen>
          <Disclosure.Button ref={el => buttonRefs.current[0] = el} className="py-2">Open/Close</Disclosure.Button>
          <Disclosure.Panel className="text-gray-500"><p>disclosure1</p></Disclosure.Panel>
        </Disclosure>
  
        <Disclosure defaultOpen>
          <Disclosure.Button ref={el => buttonRefs.current[1] = el} className="py-2">Open/Close</Disclosure.Button>
          <Disclosure.Panel className="text-gray-500"><p>disclosure2</p></Disclosure.Panel>
        </Disclosure>
  
        <Disclosure defaultOpen>
          <Disclosure.Button ref={el => buttonRefs.current[2] = el} className="py-2">Open/Close</Disclosure.Button>
          <Disclosure.Panel className="text-gray-500"><p>disclosure3</p></Disclosure.Panel>
        </Disclosure>
        {/* 剩余面板按相同规则挂载ref即可 */}
      </div>
    )
  }
  

优先选择第一种受控模式实现，逻辑更清晰可维护，后续如果要加批量展开、状态重置、根据外部条件自动切换面板等需求，都可以直接通过修改父组件state实现。第二种ref方案属于兼容写法，仅适合不想重构现有代码的场景使用，若后续Disclosure组件内部DOM结构调整，可能出现兼容问题。

内容的提问来源于stack exchange，提问作者Dylan L.