在父组件和子组件上使用 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} /> 
    </>
  )
}

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

Using the Chakra-UI useDisclosure hook on both a parent and child component

reactjs

chakra-ui