Chakra UI 模态无法按预期工作

Question

我正在关注 chakra UI 的文档。这是 chakra ui 的文档。但它并没有像预期的那样工作，每当我触发挂钩时，屏幕就会变成空白。

下面是代码示例。模态框位于文件末尾。 从 DialogModal.js 文件导入的 DialogModal 组件

import React from "react";
import {
    Avatar,
    Box,
    Collapse,
    DrawerContent,
    DrawerOverlay,
    Flex,
    Icon,
    IconButton,
    Input,
    InputGroup,
    InputLeftElement,
    Text,
    useColorModeValue,
    useDisclosure,
    useColorMode,
    Button,
    Drawer,
} from "@chakra-ui/react";
import {AddIcon} from '@chakra-ui/icons';
import { FaBell, FaClipboardCheck, FaRss } from "react-icons/fa";
import { FaMoon, FaSun } from "react-icons/fa";
import { AiFillGift } from "react-icons/ai";
import { BsGearFill } from "react-icons/bs";
import { FiMenu, FiSearch } from "react-icons/fi";
import { HiCode, HiCollection } from "react-icons/hi";
import { MdHome, MdKeyboardArrowRight } from "react-icons/md";
import { BrowserRouter, Switch, Route,useRouteMatch } from 'react-router-dom';



import DonationBasedForm from '../../components/CreateDonationBased/CreateDonationBased'
import Campaigns from "../Campaigns/Campaigns";
import CreateCampaign from "../../components/CreateCampaign/CreateCampaign";
import DialogModal from "../../components/Modal/DialogModal";
import DonationBasedCampaigns from "../DonationBasedCampaigns/DonationBasedCampaigns";
    
export default function Swibc() {
      const sidebar = useDisclosure();
      const integrations = useDisclosure();

      // Create campaign drawer hooks
      const { isOpen, onOpen, onClose } = useDisclosure();
      const btnRef = React.useRef();

      let { path, url } = useRouteMatch();
      const { toggleColorMode: toggleMode } = useColorMode();
      const SwitchIcon = useColorModeValue(FaMoon, FaSun);
      const NavItem = (props) => {
        const { icon, children, ...rest } = props;
        return (
          <Flex
            align="center"
            px="4"
            pl="4"
            py="3"
            cursor="pointer"
            color={useColorModeValue("inherit", "gray.400")}
            _hover={{
              bg: useColorModeValue("gray.100", "gray.900"),
              color: useColorModeValue("gray.900", "gray.200"),
            }}
            role="group"
            fontWeight="semibold"
            transition=".15s ease"
            {...rest}
          >
            {icon && (
              <Icon
                mr="2"
                boxSize="4"
                as={icon}
              />
            )}
            {children}
          </Flex>
        );
      };
    
      const SidebarContent = (props) => (
        <Box
          as="nav"
          pos="fixed"
          top="0"
          left="0"
          zIndex="sticky"
          h="full"
          pb="10"
          overflowX="hidden"
          overflowY="auto"
          bg={useColorModeValue("white", "gray.800")}
          borderColor={useColorModeValue("inherit", "gray.700")}
          borderRightWidth="1px"
          w="60"
          {...props}
        >
          <Flex px="4" py="5" align="center">
            <Text
              fontSize="2xl"
              ml="2"
              color={useColorModeValue("brand.500", "white")}
              fontWeight="semibold"
            >
              cffp
            </Text>
          </Flex>
          <Flex
            direction="column"
            as="nav"
            fontSize="sm"
            color="gray.600"
            aria-label="Main Navigation"
          >
            <NavItem icon={MdHome}>Home</NavItem>
            <NavItem icon={FaRss}>Articles</NavItem>
            <NavItem icon={HiCollection}>Collections</NavItem>
            <NavItem icon={FaClipboardCheck}>Checklists</NavItem>
            <NavItem icon={HiCode} onClick={integrations.onToggle}>
              Integrations
              <Icon
                as={MdKeyboardArrowRight}
                ml="auto"
                transform={integrations.isOpen && "rotate(90deg)"}
              />
            </NavItem>
            <Collapse in={integrations.isOpen}>
              <NavItem pl="12" py="2">
                Shopify
              </NavItem>
              <NavItem pl="12" py="2">
                Slack
              </NavItem>
              <NavItem pl="12" py="2">
                Zapier
              </NavItem>
            </Collapse>
            <NavItem icon={AiFillGift}>Changelog</NavItem>
            <NavItem icon={BsGearFill}>Settings</NavItem>
          </Flex>
        </Box>
      );
      return (
        <>
        
        <Box
          as="section"
          bg={useColorModeValue("gray.50", "gray.700")}
          minH="100vh"
        >
          <SidebarContent display={{ base: "none", md: "unset" }} />
         
          <Drawer
            isOpen={sidebar.isOpen}
            onClose={sidebar.onClose}
            placement="left"
          >
            <DrawerOverlay />
            <DrawerContent>
              <SidebarContent w="full" borderRight="none" />
            </DrawerContent>
          </Drawer>
          <Box ml={{ base: 0, md: 60 }} transition=".3s ease">
            <Flex
              as="header"
              align="center"
              justify="space-between"
              w="full"
              px="4"
              bg={useColorModeValue("white", "gray.800")}
              borderBottomWidth="1px"
              borderColor={useColorModeValue("inherit", "gray.700")}
              h="14"
            >
              <IconButton
                aria-label="Menu"
                display={{ base: "inline-flex", md: "none" }}
                onClick={sidebar.onOpen}
                icon={<FiMenu />}
                size="sm"
              />
              <InputGroup w="96" display={{ base: "none", md: "flex" }}>
                <InputLeftElement color="gray.500" children={<FiSearch />} />
                <Input  placeholder="Search for articles..." />
                
              </InputGroup>
    
              <Flex align="center">
                <Button 
                  colorScheme="brand" 
                  size="sm" 
                  mr={[1,1,3]}
                  onClick={onOpen}
                  ref={btnRef}
                > 
                  Create <AddIcon ml={[1,1,2]} /> 
                </Button>
                

                // MODAL 

                <DialogModal />
                <Avatar
                  mr="4"
                  size="sm"
                  name="anubra266"
                  src="https://avatars.githubusercontent.com/u/30869823?v=4"
                  cursor="pointer"
                />
                <Icon mr={4} ml={4} color="gray.500" as={SwitchIcon} cursor="pointer" onClick={toggleMode}/>
              </Flex>
            </Flex>

        </>
      );
    }

对话框模式文件：

import React from 'react';

import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
    Button,
    Lorem,
    useDisclosure
} from "@chakra-ui/react"

const DialogModal = () => {
    const { isOpen, onOpen, onClose } = useDisclosure()
    return (
        <div>
        <Button onClick={onOpen}>Open Modal</Button>

        <Modal isOpen={isOpen} onClose={onClose}>
            <ModalOverlay />
            <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
                <Lorem count={2} />
            </ModalBody>

            <ModalFooter>
                <Button colorScheme="blue" mr={3} onClick={onClose}>
                Close
                </Button>
                <Button variant="ghost">Secondary Action</Button>
            </ModalFooter>
            </ModalContent>
        </Modal>
        </div>
    )

}

export default DialogModal;

Answer 1

就我而言，我没有用 ChakraProvider 包装整个组件，因为模态以某种奇怪的方式打开。

<ChakraProvider>{...your_component}</ChakraProvider>

Answer 2

当我从模式中删除 Lorem 标签后，问题就消失了。

const DialogModal = () => {
    const { isOpen, onOpen, onClose } = useDisclosure()
    return (
        <div>
        <Button onClick={onOpen}>Open Modal</Button>

        <Modal isOpen={isOpen} onClose={onClose}>
            <ModalOverlay />
            <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
                {/* <Lorem count={2} /> */}
            </ModalBody>

            <ModalFooter>
                <Button colorScheme="blue" mr={3} onClick={onClose}>
                Close
                </Button>
                <Button variant="ghost">Secondary Action</Button>
            </ModalFooter>
            </ModalContent>
        </Modal>
        </div>
    )

}

Answer 3

chakra-ui 的最新版本 v3（截至目前）没有像以前版本那样的模态组件。您可以在此版本中使用Dialog Component执行相同的操作。