как сделать модальное окно react

Question

Aleksey · Accepted Answer

Для создания модального окна в React.js можно использовать различные библиотеки, например, react-modal или react-bootstrap. Рассмотрим пример использования react-modal.

Устанавливаем библиотеку react-modal с помощью npm:

npm install react-modal

Импортируем библиотеку react-modal в наш компонент:

import React, { useState } from 'react';
import Modal from 'react-modal';

Создаем состояние для открытия и закрытия модального окна, а также функцию для изменения этого состояния:

const [modalIsOpen, setModalIsOpen] = useState(false);

const openModal = () => {
  setModalIsOpen(true);
};

const closeModal = () => {
  setModalIsOpen(false);
};

Определяем содержимое модального окна:

const modalContent = (
  <div>
    <h2>Заголовок модального окна</h2>
    <p>Текст модального окна</p>
    <button onClick={closeModal}>Закрыть</button>
  </div>
);

Рендерим кнопку для открытия модального окна и компонент Modal:

return (
  <div>
    <button onClick={openModal}>Открыть модальное окно</button>
    <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
      {modalContent}
    </Modal>
  </div>
);

Готово! Теперь при клике на кнопку будет открываться модальное окно с заданным содержимым.

Заголовок модального окна

Текст модального окна

); ``` - Рендерим кнопку для открытия модального окна и компонент `Modal`: ```javascript return (

{modalContent}

); ``` Готово! Теперь при клике на кнопку будет открываться модальное окно с заданным содержимым.

как сделать модальное окно react

Ответы

Каталог