使用 HeadlessUI 以编程方式关闭所有披露

Question

我有一个在页面加载时<Disclosure>设置的列表（大约 10 个）。defaultOpen

我想通过单击按钮以编程方式关闭披露。例如，按钮会读取内容close all，单击后信息披露将关闭。

const [open, setOpen] = useState(true)

const close = () => {setOpen(false)}

<button onClick={close}>Close All</button>

<Disclosure defaultOpen>
  <Disclosure.Button>Open/Close</Disclosure.Button>
  <Disclosure.Panel>
    <p>disclosure1</p>
  </Disclosure.Panel>
</Disclosure>

<Disclosure defaultOpen>
  <Disclosure.Button>Open/Close</Disclosure.Button>
  <Disclosure.Panel>
    <p>disclosure2</p>
  </Disclosure.Panel>
</Disclosure>

<Disclosure defaultOpen>
  <Disclosure.Button>Open/Close</Disclosure.Button>
  <Disclosure.Panel>
    <p>disclosure3</p>
  </Disclosure.Panel>
</Disclosure>

有没有办法做到这一点？从我发现的文档中：

      <Disclosure.Panel>
        {({ close }) => (
          <button
            onClick={async () => {
              await fetch('/accept-terms', { method: 'POST' })
              close()
            }}
          >
            Read and accept
          </button>
        )}
      </Disclosure.Panel>

但如果不手动单击，我找不到其他任何东西来关闭它们<Disclosure.Button/>