Pop Up component – Victor.V.P. – Medium

Pop Up component  #frontenddevelopment #react #webdevelopment #reactjs

  • В примере реализовано закрытие PopUp при нажатии как на кнопку “Close” так и на document.
  • // CLASS POPUPclass PopUp extends React.Component { constructor() { super(); this.onDocumentClick = }componentDidMount() { this.onDocumentClick); }componentWillUnmount() { this.onDocumentClick); }onDocumentClick (event) { let pointer = event.target; const element = ReactDOM.findDOMNode(this); while (pointer !
  • == document pointer) { if (pointer === element) { return; } pointer = pointer.parentNode; } this.props.onClose(); //Закрываем PopUp при клике на document }render() { return div className=”popUpContainer” button className=”closeBtn” onClick={ () = { this.props.onClose this.props.onClose(); }} CLOSE/button {this.props.children} /div; }}Родительский компонент// CLASS PARENT COMPONENTclass ParentComponent extends React.Component {constructor(props) { super(props);…
  • materialsPopup}); } }Open PopUp/div;return div className=”root” div className=”header” OpenBtn/ { !!
  • materialsPopup div className=”bg” PopUp className=”materialsPopUp” onClose={ () = { this.setState({ materialsPopup: false }); } } h2This is Pop Up/h2 pYou can close the dialog by clicking on the button or the area around the dialog box/p /PopUp /div } /div /div; }}

Cоздания компонента PopUp в react. В примере реализовано закрытие PopUp при нажатии как на кнопку “Close” так и на document.

Pop Up componentCоздания компонента PopUp в react. В примере реализовано закрытие PopUp при нажатии как на кнопку “Close” так и на document.// CLASS POPUPclass PopUp extends React.Component { constructor() { super(); this.onDocumentClick = }componentDidMount() { this.onDocumentClick); }componentWillUnmount() { this.onDocumentClick); }onDocumentClick (event) { let pointer = event.target; const element = ReactDOM.findDOMNode(this); while (pointer !== document pointer) { if (pointer === element) { return; } pointer = pointer.parentNode; } this.props.onClose(); //Закрываем PopUp при клике на document }render() { return div className=”popUpContainer” button className=”closeBtn” onClick={ () = { this.props.onClose this.props.onClose(); }} CLOSE/button {this.props.children} /div; }}Родительский компонент// CLASS PARENT COMPONENTclass ParentComponent extends React.Component {constructor(props) { super(props); this.state = { materialsPopup: false }; }render() { const { materialsPopup } = this.stateconst OpenBtn = props = div className=”fileBtn” onClick={ () = { this.setState({materialsPopup: !materialsPopup}); } }Open PopUp/div;return div className=”root” div className=”header” OpenBtn/ { !!materialsPopup div className=”bg” PopUp className=”materialsPopUp” onClose={ () = { this.setState({ materialsPopup: false }); } } h2This is Pop Up/h2 pYou can close the dialog by clicking on the button or the area around the dialog box/p /PopUp /div } /div /div; }}

Pop Up component – Victor.V.P. – Medium