Chakra UI 在单个组件中使用多个模型
Chakra UI using multiple models in a single component
我正在使用脉轮 ui 并且我想在单个组件中使用两个模态。
const { isOpen , onOpen, onClose } = useDisclosure()
<Button colorScheme="teal" size="xs" mr='2' onClick={onOpen} >
Edit
</Button>
{/* Edit modal */}
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Edit Modal</ModalHeader>
<ModalCloseButton />
<ModalBody>
Edit Modal
</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={onClose}>Cancel</Button>
<Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}>
Delete
</Button>
</ModalFooter>
</ModalContent>
</Modal>
{/* Delete Address */}
<Button colorScheme="red" size="xs" onClick={onOpen}>
Delete
</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Delete Shipping Address</ModalHeader>
<ModalCloseButton />
<ModalBody>
Are you sure you want to delete the shipping address?
</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={onClose}>Cancel</Button>
<Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}>
Delete
</Button>
</ModalFooter>
</ModalContent>
</Modal>
isOpen、onOpen、onClose 不能作为变量更改,因为它们是 inbuild 脉轮函数。
有人可以建议我一种方法来改变其中两个模态(Chakra UI)操作吗?
您可以创建使用 useDisclosure
的自定义模式组件。然后你可以有这个自定义模态组件的多个实例,而不需要模态共享相同的状态:
const CustomModal = ({ showModalButtonText, modalHeader, modalBody }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Button colorScheme="red" size="xs" onClick={onOpen}>
{showModalButtonText}
</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{modalHeader}</ModalHeader>
<ModalCloseButton />
<ModalBody>{modalBody}</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={onClose}>
Cancel
</Button>
<Button
colorScheme="red"
onClick={() => {
alert(1);
}}
>
Delete
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
};
export default function App() {
return (
<div className="App">
<CustomModal
showModalButtonText="Edit"
modalHeader="Edit Modal"
modalBody="Edit Modal"
/>
<CustomModal
showModalButtonText="Delete"
modalHeader="Delete Shipping Address"
modalBody="Are you sure you want to delete the shipping address?"
/>
</div>
);
}
这样 CustomModal
的每个实例都会跟踪自己的 isOpen
、onOpen
和 onClose
状态。
因为在你的问题中,唯一的动态部分是打开按钮、模态、header 文本和模态 body 文本,我制作了道具,所以这些可以单独设置对于每个实例。如果更多的部分需要动态你可以根据需要添加道具。
我对模态进行了一些小修改,以使其更易于测试。
您可以简单地更改变量的名称isOpen
、onOpen
和 onClose
开始吧:
const { isOpen: isEditOpen , onOpen: onEditOpen, onClose: onEditClose } = useDisclosure()
const { isOpen: isDeleteOpen , onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure()
<Button colorScheme="teal" size="xs" mr='2' onClick={onEditOpen} >
Edit
</Button>
{/* Edit modal */}
<Modal isOpen={isEditOpen} onClose={onEditClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Edit Modal</ModalHeader>
<ModalCloseButton />
<ModalBody>
Edit Modal
</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={onEditClose}>Cancel</Button>
<Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}>
Delete
</Button>
</ModalFooter>
</ModalContent>
</Modal>
{/* Delete Address */}
<Button colorScheme="red" size="xs" onClick={onDeleteOpen}>
Delete
</Button>
<Modal isOpen={isDeleteOpen} onClose={onSecondModalClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Delete Shipping Address</ModalHeader>
<ModalCloseButton />
<ModalBody>
Are you sure you want to delete the shipping address?
</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={onDeleteClose}>Cancel</Button>
<Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}>
Delete
</Button>
</ModalFooter>
</ModalContent>
</Modal>
再举一个例子:
第一个模态:
const { isOpen: isFirstModalOpen , onOpen: onFristModalOpen, onClose: onFirstModalClose } = useDisclosure()
第二个模态:
const { isOpen: isSecondModalOpen , onOpen: onSecondModalOpen, onClose: onSecondModalClose } = useDisclosure()
现在这些变量具有不同的值,因此您可以在任何地方使用新名称!
您可以简单地创建两个 useDisclosure 挂钩实例。
const {
isOpen: isAssociationModalOpen,
onOpen: onOpenAssociationModal,
onClose: onCloseAssociationModal,
} = useDisclosure();
const {
isOpen: isRevocationModalOpen,
onOpen: onOpenRevocationModal,
onClose: onCloseRevocationModal,
} = useDisclosure();
所以基本上您可以更改变量 isOpen、onOpen 和 onClose 的名称,或者您可以拥有两个 useDisclosure 实例,这样您就可以在代码中使用两个或多个模态:
import React, { useState } from 'react'
import { data } from '../../../utils/Data/data'
import {
Table,
Thead,
Tbody,
Tfoot,
Tr,
Th,
Td,
Checkbox,
CheckboxGroup,
Skeleton,
Box,
VStack,
Button,
HStack,
useDisclosure
} from '@chakra-ui/react'
import EditSiteModal from '../Modal/EditSiteModal'
import DeleteSiteModal from '../Modal/DeleteSiteModal'
const MySites = () => {
const { isOpen: isEditOpen, onOpen: onEditOpen, onClose: onEditClose } = useDisclosure()
const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure()
return (
<>
<Box bgColor="white" p={10}>
<Box bgColor="white">
<EditSiteModal
isOpen={isEditOpen}
onClose={onEditClose}
/>
<DeleteSiteModal
isOpen={isDeleteOpen}
onClose={onDeleteClose}
/>
<Table variant='simple'>
<Thead>
<Tr bg="#F9F9F9" p="2" >
<Th></Th>
<Th textTransform={'capitalize'}>Site Name</Th>
<Th textTransform={'capitalize'}>Admin</Th>
<Th textTransform={'capitalize'}>Creation date & Time</Th>
<Th textTransform={'capitalize'}>Actions</Th>
</Tr>
</Thead>
<Tbody>
{data &&
data.map((sites, index: number) => {
return (
<Tr key={index} cursor={"pointer"}>
<Td><Checkbox></Checkbox></Td>
<Td>{sites.site_name}</Td>
<Td>{sites.admin}</Td>
<Td>{sites.creation_date}</Td>
<Td>
<HStack>
<Button
type="button"
bg="transparent"
border="1px"
borderRadius="base"
borderColor="#1818183D"
width="inherit"
onClick={onDeleteOpen}
mr="8px"
>
Delete
</Button>
<Button
type="button"
bg="transparent"
border="1px"
borderRadius="base"
borderColor="#F6B319"
width="inherit"
onClick={onEditOpen}
>
Edit
</Button>
</HStack>
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</Box>
</Box>
</>
)
}
export default MySites
我正在使用脉轮 ui 并且我想在单个组件中使用两个模态。
const { isOpen , onOpen, onClose } = useDisclosure()
<Button colorScheme="teal" size="xs" mr='2' onClick={onOpen} >
Edit
</Button>
{/* Edit modal */}
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Edit Modal</ModalHeader>
<ModalCloseButton />
<ModalBody>
Edit Modal
</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={onClose}>Cancel</Button>
<Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}>
Delete
</Button>
</ModalFooter>
</ModalContent>
</Modal>
{/* Delete Address */}
<Button colorScheme="red" size="xs" onClick={onOpen}>
Delete
</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Delete Shipping Address</ModalHeader>
<ModalCloseButton />
<ModalBody>
Are you sure you want to delete the shipping address?
</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={onClose}>Cancel</Button>
<Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}>
Delete
</Button>
</ModalFooter>
</ModalContent>
</Modal>
isOpen、onOpen、onClose 不能作为变量更改,因为它们是 inbuild 脉轮函数。 有人可以建议我一种方法来改变其中两个模态(Chakra UI)操作吗?
您可以创建使用 useDisclosure
的自定义模式组件。然后你可以有这个自定义模态组件的多个实例,而不需要模态共享相同的状态:
const CustomModal = ({ showModalButtonText, modalHeader, modalBody }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Button colorScheme="red" size="xs" onClick={onOpen}>
{showModalButtonText}
</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{modalHeader}</ModalHeader>
<ModalCloseButton />
<ModalBody>{modalBody}</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={onClose}>
Cancel
</Button>
<Button
colorScheme="red"
onClick={() => {
alert(1);
}}
>
Delete
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
};
export default function App() {
return (
<div className="App">
<CustomModal
showModalButtonText="Edit"
modalHeader="Edit Modal"
modalBody="Edit Modal"
/>
<CustomModal
showModalButtonText="Delete"
modalHeader="Delete Shipping Address"
modalBody="Are you sure you want to delete the shipping address?"
/>
</div>
);
}
这样 CustomModal
的每个实例都会跟踪自己的 isOpen
、onOpen
和 onClose
状态。
因为在你的问题中,唯一的动态部分是打开按钮、模态、header 文本和模态 body 文本,我制作了道具,所以这些可以单独设置对于每个实例。如果更多的部分需要动态你可以根据需要添加道具。
我对模态进行了一些小修改,以使其更易于测试。
您可以简单地更改变量的名称isOpen
、onOpen
和 onClose
开始吧:
const { isOpen: isEditOpen , onOpen: onEditOpen, onClose: onEditClose } = useDisclosure()
const { isOpen: isDeleteOpen , onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure()
<Button colorScheme="teal" size="xs" mr='2' onClick={onEditOpen} >
Edit
</Button>
{/* Edit modal */}
<Modal isOpen={isEditOpen} onClose={onEditClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Edit Modal</ModalHeader>
<ModalCloseButton />
<ModalBody>
Edit Modal
</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={onEditClose}>Cancel</Button>
<Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}>
Delete
</Button>
</ModalFooter>
</ModalContent>
</Modal>
{/* Delete Address */}
<Button colorScheme="red" size="xs" onClick={onDeleteOpen}>
Delete
</Button>
<Modal isOpen={isDeleteOpen} onClose={onSecondModalClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Delete Shipping Address</ModalHeader>
<ModalCloseButton />
<ModalBody>
Are you sure you want to delete the shipping address?
</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={onDeleteClose}>Cancel</Button>
<Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}>
Delete
</Button>
</ModalFooter>
</ModalContent>
</Modal>
再举一个例子:
第一个模态:
const { isOpen: isFirstModalOpen , onOpen: onFristModalOpen, onClose: onFirstModalClose } = useDisclosure()
第二个模态:
const { isOpen: isSecondModalOpen , onOpen: onSecondModalOpen, onClose: onSecondModalClose } = useDisclosure()
现在这些变量具有不同的值,因此您可以在任何地方使用新名称!
您可以简单地创建两个 useDisclosure 挂钩实例。
const {
isOpen: isAssociationModalOpen,
onOpen: onOpenAssociationModal,
onClose: onCloseAssociationModal,
} = useDisclosure();
const {
isOpen: isRevocationModalOpen,
onOpen: onOpenRevocationModal,
onClose: onCloseRevocationModal,
} = useDisclosure();
所以基本上您可以更改变量 isOpen、onOpen 和 onClose 的名称,或者您可以拥有两个 useDisclosure 实例,这样您就可以在代码中使用两个或多个模态:
import React, { useState } from 'react'
import { data } from '../../../utils/Data/data'
import {
Table,
Thead,
Tbody,
Tfoot,
Tr,
Th,
Td,
Checkbox,
CheckboxGroup,
Skeleton,
Box,
VStack,
Button,
HStack,
useDisclosure
} from '@chakra-ui/react'
import EditSiteModal from '../Modal/EditSiteModal'
import DeleteSiteModal from '../Modal/DeleteSiteModal'
const MySites = () => {
const { isOpen: isEditOpen, onOpen: onEditOpen, onClose: onEditClose } = useDisclosure()
const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure()
return (
<>
<Box bgColor="white" p={10}>
<Box bgColor="white">
<EditSiteModal
isOpen={isEditOpen}
onClose={onEditClose}
/>
<DeleteSiteModal
isOpen={isDeleteOpen}
onClose={onDeleteClose}
/>
<Table variant='simple'>
<Thead>
<Tr bg="#F9F9F9" p="2" >
<Th></Th>
<Th textTransform={'capitalize'}>Site Name</Th>
<Th textTransform={'capitalize'}>Admin</Th>
<Th textTransform={'capitalize'}>Creation date & Time</Th>
<Th textTransform={'capitalize'}>Actions</Th>
</Tr>
</Thead>
<Tbody>
{data &&
data.map((sites, index: number) => {
return (
<Tr key={index} cursor={"pointer"}>
<Td><Checkbox></Checkbox></Td>
<Td>{sites.site_name}</Td>
<Td>{sites.admin}</Td>
<Td>{sites.creation_date}</Td>
<Td>
<HStack>
<Button
type="button"
bg="transparent"
border="1px"
borderRadius="base"
borderColor="#1818183D"
width="inherit"
onClick={onDeleteOpen}
mr="8px"
>
Delete
</Button>
<Button
type="button"
bg="transparent"
border="1px"
borderRadius="base"
borderColor="#F6B319"
width="inherit"
onClick={onEditOpen}
>
Edit
</Button>
</HStack>
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</Box>
</Box>
</>
)
}
export default MySites