问题描述
我试图在两个不同的组件中使用 Chakra UI useDisclosure hook。基本上,我有一个带有按钮的父组件和一个带有不同按钮的子组件。我想在父组件中使用 onToggle
,在子组件中使用 onClose
-- 并且让它们都控制子组件上 isOpen
的状态。这可能吗?如果是这样,如何?
谢谢。
解决方法
您可以在父组件中使用钩子 useDisclosure
,然后将状态 isOpen
和 onClose
传递给您的子组件:
function Parent() {
const { isOpen,onToggle,onClose } = useDisclosure()
return (
<>
<Button onClick={onToggle}>Open Drawer</Button>
<Child isOpen={isOpen} onClose={onClose} />
</>
)
}