当在我的 React 应用程序中单击按钮时，我尝试渲染 Bootstrap 模式。我的 React 应用程序的代码如下。
import React, { Component } from 'react';
import { Grid, Row, Col, Button, Table } from 'react-bootstrap';
import Modal from 'react-bootstrap-modal';
import 'bootstrap/dist/css/bootstrap.css';
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
show: false
};
this.showModal = this.showModal.bind(this);
}
showModal() {
this.setState({
show: true
});
}
render() {
return (
<Grid>
<Row>
<Col md={12}>
<Button bsStyle="success" className='btn-block' onClick={this.showModal}>Create</Button>
<Modal show={this.state.show} aria-labelledby='ModalHeader'>
<Modal.Header closeButton>
<Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Some Content here</p>
</Modal.Body>
<Modal.Footer>
<Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>
<button className='btn btn-primary'>
Save
</button>
</Modal.Footer>
</Modal>
</Col>
</Row>
</Grid>
);
}
}
export default Dashboard;
当我单击按钮更改状态时，模式将打开。该按钮不再可点击。我已经检查了网络浏览器控制台中的 html 代码。模态框肯定已插入到 dom 中，但并未显示。我正在努力找出它无法正常工作的原因。可能有一些 CSS 属性阻止它工作，或者我已经包含了一些东西。
单击按钮时页面的 HTML。
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<style type="text/css">body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
</style><style type="text/css">.App {
text-align: center;
}
.App-logo {
-webkit-animation: App-logo-spin infinite 20s linear;
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
@-webkit-keyframes App-logo-spin {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes App-logo-spin {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
</style></head>
<body class="modal-open" style="overflow: hidden;">
<div id="root" aria-hidden="true"><div><div class="container"><div class="row"><div class="col-md-2"><button id="stadiums" type="button" class="btn-block btn btn-default">Stadiums</button></div><div class="col-md-2"><button id="teams" type="button" class="btn-block btn btn-default">Teams</button></div><div class="col-md-2"><button id="matches" type="button" class="btn-block btn btn-default">Matches</button></div><div class="col-md-2"><button id="tickets" type="button" class="btn-block btn btn-default">Tickets</button></div><div class="col-md-2"><button id="users" type="button" class="btn-block btn btn-default">Users</button></div></div><div class="row"><div class="col-md-12"><button type="button" class="btn-block btn btn-success">Create</button></div></div><form class="form-horizontal"><div class="form-group"><label for="formHorizontalEmail" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" placeholder="Email" id="formHorizontalEmail" class="form-control"></div></div></form></div></div></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script type="text/javascript" src="/static/js/bundle.js"></script>
<div role="dialog"><div class="modal-backdrop fade in" style="z-index: 1040;"></div><div aria-labelledby="ModalHeader" class="modal fade in" role="document" tabindex="-1" style="z-index: 1050;"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button class="close" aria-label="Close Modal"><span aria-hidden="true">×</span></button><h4 id="ModalHeader" class="modal-title">A Title Goes here</h4></div><div class="modal-body"><p>Some Content here</p></div><div class="modal-footer"><button class="btn btn-default">Cancel</button><button class="btn btn-primary">Save</button></div></div></div></div></div></body></html>
最佳答案
这对我有用:) 希望它有帮助..!
import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import { Grid, Row, Col, Modal } from 'react-bootstrap';
class Service extends Component{
constructor(props) {
super(props);
this.state = {
show: false
};
this.showModal = this.showModal.bind(this);
this.hideModal = this.hideModal.bind(this);
}
showModal() {
this.setState({
show: true
});
}
hideModal(){
this.setState({
show: false
})
}
render(){
return(
<div className="App">
<Grid>
<Row>
<Col md={12}>
<Button bsStyle="success" className='btn-block' onClick={this.showModal}>Create</Button>
<Modal show={this.state.show} onHide={this.hideModal} aria-labelledby='ModalHeader'>
<Modal.Header closeButton>
<Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Some Content here</p>
</Modal.Body>
<Modal.Footer>
<button className='btn btn-primary'>
Save
</button>
</Modal.Footer>
</Modal>
</Col>
</Row>
</Grid>
</div> /* -----App div close-----*/
)
}
}
export default Service;
关于javascript - react Bootstrap 模式不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48366613/