Поиск по сайту:

Как реализовать модальный компонент в React

Введение

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

В этом руководстве вы узнаете, как реализовать модальный компонент в вашем проекте React. Вы создадите компонент Dashboard для управления состоянием и кнопку для доступа к модальному экрану. Вы также разработаете компонент Modal для создания модального окна и кнопки для закрытия. Ваш проект будет отображать и закрывать модальное окно при нажатии кнопки.

Предпосылки

Для выполнения этого урока вам понадобятся:

  • Основное понимание React перед началом работы с этим руководством. Вы можете узнать больше о React, ознакомившись с серией статей How to Code in React.js.

Шаг 1 — Запуск компонента панели мониторинга

Панель инструментов — это место, где вы будете отображать свое модальное окно. Чтобы начать работу с информационной панелью, импортируйте экземпляр React и объект Component в файл Dashboard.js. Объявите компонент Dashboard и установите свое состояние:

import React, { Component } from "react";

class Dashboard extends Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
  }

  showModal = () => {
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };
}

export default Dashboard

Ваше состояние включает свойство show со значением false. Это позволяет скрыть модальное окно до тех пор, пока пользователь не предложит его открыть. Функции showModal() обновляют ваше состояние с помощью метода .setState(), чтобы изменить значение вашего свойства show на true, когда пользователь открывает модальное окно. Точно так же метод .setState() в вашей функции hideModal() закроет модальное окно и изменит значение в вашем свойстве show на ложь.

Примечание. Не забудьте привязать свои функции к constructor() с помощью метода .bind().

После того, как вы применили свое состояние и функции, ваш метод жизненного цикла render() будет обрабатывать отображение вашего модального окна в операторе return():

import React, { Component } from "react";

class Dashboard extends Component {
  // ...
  render() {
    return (
      <main>
        <h1>React Modal</h1>
        <button type="button" onClick={this.showModal}>
          Open
        </button>
      </main>
    );
  }
}

export default Dashboard

Кнопка button принимает атрибут React JSX onClick, чтобы применить функцию .showModal() и открыть модальное окно. Вы экспортируете свой компонент Dashboard в компонент App более высокого порядка, связанный с вашим корневым файлом HTML.

Шаг 2 — Создание модального компонента

Создайте новый файл Modal.js и объявите функциональный компонент Modal без сохранения состояния с тремя аргументами, handleClose, show и дети. Аргумент show представляет свойство show в вашем состоянии:

import './modal.css';

const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "modal display-block" : "modal display-none";

  return (
    <div className={showHideClassName}>
      <section className="modal-main">
        {children}
        <button type="button" onClick={handleClose}>
          Close
        </button>
      </section>
    </div>
  );
};

Ваш оператор return() передает аргумент children, представленный как props.children, который является ссылкой на функциональность открытия и закрытия модального окна. Модальное окно также содержит кнопку с атрибутом React JSX onClick, который принимает метод hideModal(), представленный здесь как переданный аргумент handleClose. в качестве реквизита в компонент Dashboard.

Переменная showHideClassName присваивает своему значению условное выражение, чтобы проверить, является ли значение свойства show в вашем состоянии true. Если это так, появится модальное окно. В противном случае модальное окно будет скрыто. Свойства display-block и display-none для отображения и скрытия модального окна обрабатываются через файл modal.css, импортированный в ваш . Модальный компонент.

Создайте новый файл modal.css и задайте правила для стиля размера, цвета и формы вашего Modal:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.modal-main {
  position:fixed;
  background: white;
  width: 80%;
  height: auto;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

Это создаст центрированное модальное окно с контуром белого прямоугольника и затененным фоном. Когда ваш компонент Modal готов, давайте интегрируем его в вашу Dashboard.

Шаг 3 — Включение модального компонента

Чтобы объединить свой Modal с вашей Dashboard, перейдите к файлу Dashboard.js и импортируйте свой компонент Modal ниже вашего Реагировать на воображения:

import React, { Component } from "react";
import Modal from './Modal.js';

class Dashboard extends Component {
  // ...
  render() {
    return (
      <main>
        <h1>React Modal</h1>
        <Modal show={this.state.show} handleClose={this.hideModal}>
          <p>Modal</p>
        </Modal>
        <button type="button" onClick={this.showModal}>
          Open
        </button>
      </main>
    );
  }
}

export default Dashboard

В своем операторе return() включите компонент Modal для отображения и скрытия модального окна. Атрибуты show и handleClose являются свойствами вашего компонента Modal для управления логикой вашего состояния и hideModal() функция.

Ваши компоненты Dashboard и Modal теперь будут отображаться в вашем браузере:

Посмотрите, как теперь открывается и закрывается ваш новый компонент Modal.

Заключение

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

Чтобы просмотреть этот проект вживую, вот демо CodePen этого проекта.