useDisclosure

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

Usage

实时编辑器

function Demo() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <button onClick={onOpen}>打开</button>
      <button onClick={onClose}>关闭</button>
      <p>{isOpen ? "已打开" : "已关闭"}</p>
    </>
  );
}

结果

已关闭

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	-