Модал React-Bootstrap всегда открыт / виден на странице - PullRequest
Новая
       8

Модал React-Bootstrap всегда открыт / виден на странице

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

Я использую модалact-bootstrap для рендеринга модала для моего приложения CRUD, когда пользователь нажимает на чтение для элемента, который будет отображать модал со всей запрошенной информацией.Проблема отображается при первом запуске приложения и остается навсегда. Модал остается внизу страницы и мой логический элемент, чтобы показать / скрыть модал, вот как я его называю: 

<Modal.Dialog open={this.state.showServiceModal}>

ничего не делает, когда яуберите открытую опору, результат будет тот же: модал всегда виден, и разве модели не должны появляться в центре экрана?Что дает?Модал появляется внизу, и я хочу, чтобы он появлялся посередине, и моя модальная кнопка закрытия тоже не работает, модал бутстрепа доставляет мне много времени, как я могу решить все эти проблемы?

Вот мой рендер: 

render() {
  return (
    <div>
      <div className="container content">
        <div className="row">
          <div className="col-6" />
        </div>
      </div>

      <Modal.Dialog open={this.state.showServiceModal}>
        <Modal.Header>
          <Modal.Title>Service</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <p>
            <span>id:</span> {this.state.currentService.id}
          </p>
          <p>
            <span>description:</span> {this.state.currentService.description}
          </p>
        </Modal.Body>

        <Modal.Footer>
          <Button
            variant="secondary"
            onClick={() => this.setState({ showServiceModal: false })}
          >
            Close
          </Button>
        </Modal.Footer>
      </Modal.Dialog>
    </div>
  )
}

1 Ответ

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

Вы используете open prop на Modal.Dialog, чтобы открывать и закрывать модалы.Но в документации response-bootstrap нет такого API для Modal.Dialog, поскольку он отображал статический модальный .

Использование Modal компонентакак родитель и использовать вместо него show опору.Также используйте опору centered, чтобы сделать ее вертикально центрированной.

Вот пример: 

<Modal
    show={this.state.showServiceModal}
    onHide={this.handleClose}
    size="lg"
    aria-labelledby="contained-modal-title-vcenter"
    centered
 >
    {...}
</Modal>

Вот демонстрация в песочнице:

Edit react-bootstrap

...