Chakra UI 在单个组件中使用多个模型

如何解决Chakra UI 在单个组件中使用多个模型

我正在使用 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()

现在这些变量具有不同的值，因此您可以在任何地方使用新名称！