Рендеринг нового модала с анимацией слайдов при нажатии следующей кнопки на предыдущем модале - PullRequest
Новая
       8

Рендеринг нового модала с анимацией слайдов при нажатии следующей кнопки на предыдущем модале

0 голосов
/ 17 февраля 2019

Я создал List.jsx , в котором есть кнопка «Пуск» 

 <div className="container-fluid">
            <Card>
            <Card.Img variant="top" src="" />
            <Card.Body>
              <Card.Title>Basic Level 1</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up the bulk of
                the card's content.
              </Card.Text>
              <button type="button" className="btn btn-primary" onClick={this.handleShow}>Start</button>
            </Card.Body>
          </Card>
            <ModalList showModal = {this.state.show} closeCallback = {this.handleClose}/>
          </div>

При нажатии кнопки «Пуск» загружается компонент ModalList, в котором будет кнопка «Далее».

ModalList.jsx 

<Modal show= {this.props.showModal}>
            <Modal.Header>
                <Modal.Title>Modal heading</Modal.Title>
                <button type="button" className="close" onClick={this.closeWasClicked}>
                    <span aria-hidden="true">&times;</span>
                </button>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={this.closeWasClicked}>
                    Close
                </Button>
                <Button variant="primary" >
                    Next
                </Button>
            </Modal.Footer>
  </Modal>

Когда нажимается Next, я хочу, чтобы новый модал отображался с анимацией слайдов.Я не хочу, чтобы отдельный класс создавался для каждого модального, так как модальных много (в зависимости от данных из API).
Я пытался найти «как визуализировать тот же компонент с анимацией при нажатии кнопки», но не смог найти ничего полезного.

...