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





Они назвали 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. Есть несколько библиотек, поддерживающих модальные окна. Реагировать на бутстрап предоставляет аккуратный модальный файл. Или, если вы хотите использовать только модальный, есть библиотеки, такие как реакционно-модальный и реагировать-реагировать-модальный