在父组件和子组件上使用Chakra-UI useDisclosure挂钩

Question

我正在尝试在两个不同的组件之间使用Chakra UI useDisclosure hook。基本上，我有一个带有按钮的父组件和一个带有不同按钮的子组件。我想在父组件中使用onToggle，在子组件中使用onClose --并让它们控制子组件上isOpen的状态。这个是可能的吗？如果是这样的话，是怎么做的？谢谢。

Answer 1

您可以在父组件中使用钩子useDisclosure，然后将状态isOpen和onClose传递给子组件：

function Parent() {
  const { isOpen, onToggle, onClose } = useDisclosure()

  return (
    <>
      <Button onClick={onToggle}>Open Drawer</Button>
      <Child isOpen={isOpen} onClose={onClose} /> 
    </>
  )
}