如何禁用 Chakra UI React Modal 组件的外部点击关闭功能？

Question

我在 React 应用程序中使用 Chakra UI Modal。我想在用户单击模式外部时禁用关闭模式，但我找不到任何方法来做到这一点。

Chakra UI Modal 的文档位于： https: //chakra-ui.com/docs/overlay/modal

没有标志closeOnOutsideClick

Answer 1

您可以将closeOnOverlayClickprop 添加到<Modal>组件并将其设置为false：

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

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>

      <Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          some content
        </ModalContent>
      </Modal>
    </>
  )
}

供您参考 - https://chakra-ui.com/docs/components/modal#close-modal-on-overlay-click