react-bootstrap-modal 未显示答案

【问题标题】：react-bootstrap-modal not showingreact-bootstrap-modal 未显示
【发布时间】：2018-06-30 04:48:54
【问题描述】：

我正在尝试在我的 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>

【问题讨论】：

您使用的是 Bootstrap 4 还是 Bootstrap 3？
尝试将 maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 添加到您的 html
@WebDevBooster 我正在使用 Bootstrap 4。我应该使用 Bootstrap 3 吗？
@IdanBeker 现在可以使用了。一定有一些 CSS 覆盖。
@WebDevBooster 感谢您的帮助。问题已经解决了。

标签： javascript css twitter-bootstrap reactjs bootstrap-4

【解决方案1】：

这对我有用 :) 希望对您有所帮助..！

 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;

【讨论】：