Как говорится в вопросе, я пытаюсь создать простой Модал с 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.Спасибо за помощь!