Открыть всплывающее окно в приложении reactjs

Привет, я хочу открыть всплывающее окно, похожее на то, что открывается на этом веб-сайте, когда кто-то щелкает ссылку регистрации https://www.eventshigh.com/detail/Bangalore/625f39dbdb5b8e4fb5b78a073922f221-6th-save-the-queen-corporate?src=ecbox

Я хочу передать свойства дочернему элементу, который откроется во всплывающем окне, а затем зафиксирует действие, выполненное в дочернем элементе, в родительский элемент.

Может кто-нибудь сказать мне, как лучше всего это сделать.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
0
7 719
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Они назвали Modal.

Вы можете проверить библиотеку реакционно-модальный.

Вот простой пример использования react-modal в приложении с некоторыми настраиваемыми стилями и настраиваемыми элементами ввода в модальном содержимом:

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  afterOpenModal() {
    // references are now sync'd and can be accessed.
    this.subtitle.style.color = '#f00';
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }

  render() {
    return (
      <div>
        <button onClick = {this.openModal}>Open Modal</button>
        <Modal
          isOpen = {this.state.modalIsOpen}
          onAfterOpen = {this.afterOpenModal}
          onRequestClose = {this.closeModal}
          style = {customStyles}
          contentLabel = "Example Modal"
        >

          <h2 ref = {subtitle => this.subtitle = subtitle}>Hello</h2>
          <button onClick = {this.closeModal}>close</button>
          <div>I am a modal</div>
          <form>
            <input />
            <button>tab navigation</button>
            <button>stays</button>
            <button>inside</button>
            <button>the modal</button>
          </form>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<App />, appElement);

Вы можете увидеть больше примеров здесь

Всплывающее окно называется modal. Есть несколько библиотек, поддерживающих модальные окна. Реагировать на бутстрап предоставляет аккуратный модальный файл. Или, если вы хотите использовать только модальный, есть библиотеки, такие как реакционно-модальный и реагировать-реагировать-модальный

Другие вопросы по теме