В этой статье мы рассмотрим различные способы одновременного открытия двух модальных окон с помощью библиотеки Chakra UI. Chakra UI — популярная библиотека компонентов для создания приложений React с упором на доступность и удобство для разработчиков. Мы рассмотрим несколько подходов к реализации этой функциональности, сопровождая их примерами кода для каждого метода.

Методы:

Метод 1: использование Portal и useState Hook

import { useState } from 'react';
import { Modal, ModalOverlay, ModalContent, Button } from '@chakra-ui/react';
function App() {
  const [isOpen1, setIsOpen1] = useState(false);
  const [isOpen2, setIsOpen2] = useState(false);
  const openModal1 = () => setIsOpen1(true);
  const openModal2 = () => setIsOpen2(true);
  return (
    <>
      <Button onClick={openModal1}>Open Modal 1</Button>
      <Button onClick={openModal2}>Open Modal 2</Button>
      {isOpen1 && (
        <Modal isOpen={isOpen1} onClose={() => setIsOpen1(false)}>
          <ModalOverlay />
          <ModalContent>
            {/* Modal 1 content */}
          </ModalContent>
        </Modal>
      )}
      {isOpen2 && (
        <Modal isOpen={isOpen2} onClose={() => setIsOpen2(false)}>
          <ModalOverlay />
          <ModalContent>
            {/* Modal 2 content */}
          </ModalContent>
        </Modal>
      )}
    </>
  );
}
export default App;

Метод 2: использование хука useRef и ModalManager пользовательского интерфейса Chakra

import { useRef } from 'react';
import { Modal, ModalOverlay, ModalContent, Button, useModalManager } from '@chakra-ui/react';
function App() {
  const modalManager = useModalManager();
  const modal1Ref = useRef();
  const modal2Ref = useRef();
  const openModal1 = () => modalManager.openModal({ id: 'modal1' });
  const openModal2 = () => modalManager.openModal({ id: 'modal2' });
  return (
    <>
      <Button onClick={openModal1}>Open Modal 1</Button>
      <Button onClick={openModal2}>Open Modal 2</Button>
      <Modal isOpen={modalManager.isOpen('modal1')} onClose={() => modalManager.closeModal({ id: 'modal1' })}>
        <ModalOverlay />
        <ModalContent ref={modal1Ref}>
          {/* Modal 1 content */}
        </ModalContent>
      </Modal>
      <Modal isOpen={modalManager.isOpen('modal2')} onClose={() => modalManager.closeModal({ id: 'modal2' })}>
        <ModalOverlay />
        <ModalContent ref={modal2Ref}>
          {/* Modal 2 content */}
        </ModalContent>
      </Modal>
    </>
  );
}
export default App;

Метод 3. Использование ModalStack пользовательского интерфейса Chakra

import { Modal, ModalOverlay, ModalContent, Button, useModal } from '@chakra-ui/react';
function App() {
  const { isOpen, onClose, onOpen } = useModal();
  return (
    <>
      <Button onClick={onOpen}>Open Modal 1</Button>
      <Button onClick={onOpen}>Open Modal 2</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          {/* Modal content */}
        </ModalContent>
      </Modal>
    </>
  );
}
export default App;

В этой статье мы рассмотрели различные способы одновременного открытия двух модальных окон в пользовательском интерфейсе Chakra. Мы рассмотрели три разных подхода, каждый со своей реализацией, на примерах кода. Эти методы включают в себя использование порталов и перехватчика useState, использование перехватчика useRef с ModalManager пользовательского интерфейса Chakra и использование ModalStack пользовательского интерфейса Chakra. Используя эти методы, вы можете создавать несколько модальных интерфейсов в своих приложениях React на основе пользовательского интерфейса Chakra.

Теги:

• Интерфейс чакры
• Реагировать
• Модальные окна
• Компоненты пользовательского интерфейса
• Разработка интерфейса