gpt4 book ai didi

javascript - Bootstrap Modal 在 React JS 中不起作用

转载 作者:行者123 更新时间:2023-11-30 19:23:23 25 4
gpt4 key购买 nike

我得到一个错误。我已经添加了一些代码,并希望通过我的代码了解原因它不工作。我不能使用 react 带。请建议我们是否可以在 React 中使用 Bootstrap 模态。

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

最佳答案

您可以使用 CDNjquerybootstrap 包含在 中的 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

关于javascript - Bootstrap Modal 在 React JS 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57201895/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com