问题描述
我正在使用 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)操作的方法吗?
解决方法
您可以创建一个使用 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
状态。
由于在您的问题中唯一的动态部分是用于打开的按钮、模态、标题文本和模态正文文本,因此我制作了道具,因此可以为每个实例单独设置这些道具。如果需要更多的部分是动态的,您可以根据需要添加道具。
我对模态做了一些小改动,以便于测试。
,您可以简单地更改变量的名称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()
现在这些变量具有不同的值,因此您可以在任何地方使用新名称!