Question

我是React 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，默认情况下为false。现在，当我单击按钮时，状态会发生变化，并且状态变为true，在那里，该模态应该从行开始显示，

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

所以这里发生的是，当我在confirm模式中使用控制台日志时，它还会显示控制台日志值，但不会显示模式。

有人可以帮我吗？

未显示反应模态

0 个答案: