React.js + Reactstrap нескольких модалов в одном компоненте - PullRequest
Новая
       25

React.js + Reactstrap нескольких модалов в одном компоненте

0 голосов
/ 26 ноября 2018

Я пытаюсь использовать реактивную ленту для отображения двух разных модальностей на клике в моем компоненте нижнего колонтитула.

Мне удалось создать нижний колонтитул на основе классов, который переключает модальную видимость, основанную на состоянии, и внешний модальный элемент для отображения модальности при нажатии на каждую «ссылку».

Но явсе еще пытаюсь найти способ отображения различного контента (заголовка и модального тела) в одном и том же модале для каждой ссылки. 

//FOOTER

import React, { Component } from 'react';

import MainModal from '../../elements/modal';


class Footer extends Component{

  state = {
    modal: false
  }

  toggle = () => {
    this.setState({
        modal: !this.state.modal
    })
  }

  render(){
    return(
      <footer className="container-fluid footer">
          <div className="modals sm-text-center">
              <span className="sm-block"><span className="fLink" onClick={this.toggle}>Terms of use</span> | <span className="fLink" onClick={this.toggle}>Privacy Policy</span></span>
            <div className="clearfix"/>
          </div>
          <MainModal type="basic" toggle={this.toggle} modal={this.state.modal}/>
      </footer>
    )
  }
}
export default Footer;




//MODAL TEMPLATE

import React, { Component } from 'react';
import { Modal, ModalHeader, ModalBody } from 'reactstrap';


    class MainModal extends Component {

        render(){
            return(
                <Modal isOpen={this.props.modal} toggle={this.props.toggle}>
                    <ModalHeader toggle={this.props.toggle}>Modal title</ModalHeader>
                    <ModalBody>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </ModalBody>
                </Modal>
            );
        }
    };

export default MainModal;

Какой будет лучший / элегантный способ отображения контента для контента?Условия использования и политика конфиденциальности?

1 Ответ

0 голосов
/ 26 ноября 2018

Передайте "title" и body body "методу toggle (), а затем <MainModal />

Modal: 

<Modal isOpen={this.props.isModalOpen} toggle={this.props.toggle}>
    <ModalHeader toggle={this.props.toggle}>
      {this.props.modalTitle}
    </ModalHeader>
    <ModalBody>{this.props.modalBody}</ModalBody>
</Modal>

Footer: 

<span
  className="fLink"
  onClick={e =>
     this.toggle("Terms of Use", "Body for Terms of User")
  }
>
  Terms of use
</span>

<span
 className="fLink"
 onClick={e =>
    this.toggle("Privacy Policy", "Body for Privacy Policy")
 }
>
  Privacy Policy
</span>

Состояние: 

state = {
 isModalOpen: false,
 modalTitle: "",
 modalBody: ""
};

Метод переключения: 

toggle = (title, body) => {
 this.setState({
   isModalOpen: !this.state.modal,
   modalTitle: title,
   modalBody: body
 });
};

Вот полное решение: https://codesandbox.io/s/63jqmvzvn

Надеюсь, это поможет вам.

...