Reactstrap Модальное окно не отображается - PullRequest
Новая
       12

Reactstrap Модальное окно не отображается

0 голосов
/ 24 мая 2018

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

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

ниже моиcode и package.json 

import React from 'react'
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class Demoextends React.Component {
  constructor(props) {
     super(props);
     this.state = {
      modal: false
    };
    this.toggle = this.toggle.bind(this);
  };
  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }
  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>Launch</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button onClick={this.toggle}>Do Something</Button>{' '}
            <Button onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default Demo

Ниже приведен package.json 

 "dependencies": {
    "bootstrap": "^4.1.1",
    "cors": "^2.8.4",
    "moment": "^2.22.1",
    "react": "^16.2.0",
    "react-calendar": "^2.14.0",
    "react-dom": "^16.2.0",
    "react-intl": "^2.4.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1",
    "reactstrap": "^6.0.1",
    "redux": "^3.7.2"
  },

1 Ответ

0 голосов
/ 24 мая 2018

Вам нужно импортировать загрузчик в ваше приложение. Установка - реактивная лента

import 'bootstrap/dist/css/bootstrap.min.css';

...