小编典典

Bootstrap Modal在React JS中不起作用

reactjs

我得到一个错误。我添加了一些代码,并希望在我的代码中了解为什么它不起作用。我不能使用react-
strap。请建议我们是否可以在反应中使用Bootstrap模式。

我得到一个错误。我添加了一些代码,并希望在我的代码中了解为什么它不起作用。我不能使用react-
strap。请建议我们是否可以在反应中使用Bootstrap模式。下面是我的代码

import React from 'react';
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;



class Modal extends React.Component {
    constructor(props) {
        super(props);


    }

    componentDidMount() {
        $('#myModal').on('shown.bs.modal', function () {
            $('#myInput').trigger('focus')
          })



    }

    render()
    {
    return (
        <div>
             <div className="bd-example">
                 //Button code
                 <button type="button" className="btn btn-primary " data-toggle="modal" data-target="#exampleModalLive">
                Launch demo modal</button>

  //Modal code
            <div className="modal" id="exampleModalLive" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div className="modal-dialog modal-dialog-centered" role="document">
                <div className="modal-content">
                <div className="modal-header">
                    <h5 className="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div className="modal-body">
                    ...
                </div>
                <div className="modal-footer">
                    <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" className="btn btn-primary">Save changes</button>
                </div>
                </div>
            </div>
            </div>

           </div>



        </div>
    );
  }

}

  export default Modal

阅读 268

收藏
2020-07-22

共1个答案

小编典典

您可以在文件夹中的文件中包含jquerybootstrap使用。CDN``index.html``public

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

另外,请确保您已添加bootstrap.css文件,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

演示版

2020-07-22