我正在使用 chakra 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 不能作为变量更改,因为它们是内置的脉轮函数。有人可以建议我一种方法来改变其中两种模式(Chakra UI)操作吗?