Значок модального закрытия ReactStrap не отображается в модале и Как использовать заголовок с другим тегом - PullRequest
Новая
       16

Значок модального закрытия ReactStrap не отображается в модале и Как использовать заголовок с другим тегом

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

Я новичок в реакции JS.Здесь я использую модальное значение reactStrap. 

<Modal isOpen={props.isOpen} centered='true'>
        <ModalHeader>
          Change this Question?
          <button type="button" class="close" aria-label="Close" onClick={props.closeModal} ><span aria-hidden="true">×</span></button>
        </ModalHeader>
        <ModalBody>
          <div className="row">
            <div className="col-md-12 text-center ">
              <Button type="submit" className="btn btn-outline-primary" onClick={props.showChangeQuestionModal} >Change by creating your own Question</Button>
            </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">
              <Button type="submit" color="btn btn-primary">Change and Replace from Question bank</Button>
            </div>
          </div>
        </ModalBody>
        <ModalFooter>
        </ModalFooter>
      </Modal>
    </div>

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

Другая проблема заключается в том, что в ModalHeader он приходит по умолчанию h5, так как я могу это изменить?

1 Ответ

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

Первый вопрос: вам нужно предоставить метод toggle для вашего ModalHeader реквизита компонента, если вы хотите, чтобы Reactionstrap показывал свою собственную кнопку закрытия, чтобы ваш ModalHeader выглядел так: 

<ModalHeader toggle={this.toggleModalMethod}>
   Change this Question?
</ModalHeader>

Второй вопрос: Вы не собираетесь делать много с h5 внутри модального заголовка, но вы определенно можете изменить свой стиль элемента h5, чтобы он выглядел так, как вы хотите, чтобы он выглядел: 

<ModalHeader>
  <span className="customStyleToOverrideDefault">Change this Question?</span>
</ModalHeader>

Пожалуйста, не забудьтепроголосуй за мой ответ, если он тебе помог.

...