我在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;
当我单击按钮更改状态时，模式将打开。该按钮不再可点击。我已经在Web浏览器控制台中检查了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>
答案 0 :(得分：0)
这对我有用:) 希望它有所帮助..！
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;