引导模式在 React JS 中不起作用

Posted 2023-03-05

【中文标题】引导模式在 React JS 中不起作用

【英文标题】：Bootstrap Modal is not working in React JS

【发布时间】：2019-12-03 17:27:52

【问题描述】：

我得到一个错误。 我添加了一些代码，并想通过我的代码了解原因 它不工作。 我不能使用反应带。请建议我们是否可以在反应中使用 Bootstrap 模态。

我得到一个错误。 我添加了一些代码，并想通过我的代码了解原因 它不工作。 我不能使用反应带。请建议我们是否可以在反应中使用 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;

【问题讨论】：

最好不要在react项目中添加jquery。发布您的代码，以便我们提供帮助。

建议你试试这个 - react-bootstrap.github.io/components/modal

我不能在我的工作中使用 react-strap。因为它不属于 Bootstrap。

这种情况下你需要通过CDN使用jquery，在index.html文件中添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>。

发布你的代码，你是如何使用模态的？

【参考方案1】：

您可以使用CDN 将jquery 和bootstrap 包含在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">

Demo

【参考方案2】：

我认为您没有在 index.js 文件中导入引导 CSS 和 js。

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

导入这些css和js后就可以正常使用了

【参考方案3】：

安装jquery

npm install -S jquery

导入 jquery 和引导

import 'jquery/dist/jquery.min.js';

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";