Почему мой модал не отображается на экране в React Bootstrap? - PullRequest
0 голосов
/ 05 июня 2018

Как говорится в вопросе, я пытаюсь создать простой Модал с Bootstrap для моего React Project.Тем не менее, модал не появляется после того, как я нажимаю кнопку, которая должна активировать модал.

Вот код моего LoginPage.js.Это компонент, который отображается через ReactDOM.render в моем файле index.js.

import React from 'react';
import { Button, ButtonToolbar, Modal } from 'react-bootstrap';
class LoginPage extends React.Component {
    constructor(props, context) {
      super(props, context);

      this.handleShow = this.handleShow.bind(this);
      this.handleClose = this.handleClose.bind(this);

      this.state = {
        show: false,
      };
    }

    handleClose() {
      this.setState({ show: false });
    }

    handleShow() {
      this.setState({ show: true });
    }

    render() {
      return (
        <div>
        <p>Click to get the full Modal experience!</p>
        <Button bsStyle="primary" bsSize="large" onClick={this.handleShow}>
          Launch demo modal
        </Button>

        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Text in a modal</h4>
            <p>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.handleClose}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
      );
    }
  }

export default LoginPage;

Когда я пытаюсь запустить его в браузере, это выглядит так: как это выглядит в моембраузер .Нажатие на кнопку абсолютно ничего не делает.Нет ошибок из консоли и не работает в других браузерах.У меня есть bootstrap, реакция bootstrap установлена, и он указан как зависимость в моем файле JSON.Спасибо за помощь!

1 Ответ

0 голосов
/ 05 июня 2018

Я полагаю, что реквизит, чтобы скрыть и показать модал: isOpen

реагирующая планка. Модальные

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...