跳到主要内容

useDisclosure

useDisclosure 是一个提供了创建披露小部件所需的所有工具的 hook。披露小部件用于显示或隐藏内容。此 hook 提供了控制内容可见性的状态和函数。

Usage

实时编辑器
function Demo() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <button onClick={onOpen}>Open</button>
      <button onClick={onClose}>Close</button>
      <p>{isOpen ? "Open" : "Close"}</p>
    </>
  );
}
结果
Loading...

API

UseDisclosureProps

参数名描述类型默认值
isOpen是否打开,传了则为受控boolean-
defaultOpen默认打开状态boolean-
onClose关闭时的回调() => void-
onOpen打开时的回调() => void-
onChange状态改变时的回调(isOpen: boolean | undefined) => void-

useDisclosure

Returns

{ isOpen: boolean; onOpen: () => void; onClose: () => void; onOpenChange: () => void; isControlled: boolean; }

Arguments

参数名描述类型默认值
props-UseDisclosureProps | undefined-