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

Question

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

标签： reactjschakra-ui

Answer 1

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

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

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