Реактальный модал не показывается - PullRequest
Новая
       8

Реактальный модал не показывается

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

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

   export class QuestionDetails extends Component {

  constructor(props) {
    super(props);
    this.state = {
      showModal : false
    }
  }

questionAnalitic(analitics) {
    if (!(analitics.length <= 0) || (analitics == undefined)) {
      return analitics.map((analiticss) =>
        <div className="col-md-8 d-flex justify-content-around questionDetailRow1">
          <div>
            <span><i className="fa fa-check-circle" style={{ fontSize: '24px', color: '#0f9d8f' }}></i></span><span className="ml-2">{analiticss.correct}</span>

          </div>
          <div>
            <span> <i class="fa fa-times-circle" style={{ fontSize: '24px', color: 'rgb(251, 76, 47)' }}></i></span><span className="ml-2">{analiticss.wrong}</span>
          </div>
          <div>
            <span className='skip-background'><i className="fa fa-fast-forward" style={{ color: 'black' }}></i></span><span className="ml-2">{analiticss.skipped}</span>
          </div>
          {
            this.props.isInViewMode ?
              null
              :
              <button type="button" onClick={() => this.setState({showModal: true})} className="btn btn-outline-primary">Change</button>
          }
        </div>
      );
    }


render() {
    return (
      //  <span className="selectJdMsg alert alert-info">Please select the Question to See the more details</span>
      < div className="justify-content-between align-items-center" >
        <div className="row mt-2" style={{ alignItems: 'center' }} >
          <h5 className="col-md-4 " style={{ paddingLeft: '15px', fontSize: '18px', fontWeight: 'bold' }}>Question {this.props.questionNo}</h5>
          {this.questionAnalitic(this.props.questionAnalitics)}
        </div>
         {  this.state.showModal && <ConfirmationModal /> }
</div>
</div>
</div>


confirmModal.js

import React from 'react';
const ConfirmationModal = () => {
  return (
    <div className="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div className="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div className="modal-content">
          <div className="modal-header">
            <h6 className="modal-title" id="exampleModalLabel">Change this Question?</h6>
            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div className="modal-body">
            <div className="row">
              <div className="col-md-12 text-center ">
                <span className="">
                  <button type="submit" className="btn btn-outline-primary modalBtnSize" data-toggle="modal" data-target="#changeQuestionModal" >Change by creating your own Question</button>
                </span>
              </div>
            </div>
            <div className="row">
              <div className="col-md-12 text-center marginForOrOption">
                <span>or</span>
              </div>
            </div>
            <div className="row">
              <div className="col-md-12 text-center">
                <span className="">
                  <button type="submit" className="btn btn-primary modalBtnSize">Change and Replace from Question bank</button>
                </span>
              </div>
            </div>
          </div>
          <div className="modal-footer">
            {/* <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button> */}

          </div>
        </div>
      </div>
    </div>
  )
}
export default ConfirmationModal;

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

, поэтому у меня есть состояние showModal, которое по умолчанию ложно.теперь, когда я нажимаю на кнопку, состояние меняется, и оно становится истинным, и этот модал должен отображаться из строки, 

{ this.state.showModal && <confirmModal />  }

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

Может ли кто-нибудь помочь мне с этим?

...