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

2 года назад

Nikolai Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Для создания модального окна в 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>
);

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

2 года назад

Aleksey

2 месяца

React

Навык разрабатывать быстрые и удобные интерфейсы, открывающий доступ к интересным вакансиям в крупных компаниях

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

ООП на Javascript

Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

2 месяца

Bootstrap

Навык работы с SASS, Bootstrap 5 и Gulp для ускорения, упрощения и оптимизации процесса вёрстки и разработки сайтов

Похожие вопросы