gpt4 book ai didi

javascript - React jQuery 无法将元素识别为 Bootstrap 模式

转载 作者:行者123 更新时间:2023-12-03 01:49:51 24 4
gpt4 key购买 nike

目标:在 React 中访问 Bootstrap Modal 的 modal() 代码。

有一个带有 Bootstrap v4 的 React 应用程序。

package.json:

{
...
"dependencies": {
"bootstrap": "^4.1.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.3",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router-dom": "^4.2.2",
"react-scripts-ts": "2.8.0"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"devDependencies": {
"@types/jest": "^22.2.3",
"@types/node": "^9.6.18",
"@types/react": "^16.3.14",
"@types/react-dom": "^16.0.5",
"@types/react-router-dom": "^4.2.6"
},
...
}

现在尝试通过 Chrome 开发工具获取 modal() 会给出:

enter image description here

所以看起来是这样的:

  • 可以看到 jQuery;
  • 无法foo Modal识别为Bootstrap的modal()

如何让 jQuery 将 foo 识别为 modal()

最佳答案

不确定我是否理解您的期望。但是如果你想获取一个元素作为引导模态对象,你必须至少调用一次模态作为初始化。请检查下面我的代码片段:

$('.show-modal-btn').on('click', () => {
let yourModalEl = $('#your-modal');
console.log(yourModalEl.data('bs.modal')); // will be undefined
yourModalEl.modal();
console.log(yourModalEl.data('bs.modal')); // modal object
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="modal fade" id="your-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
</div>
</div>
</div>

<button class="show-modal-btn">Init modal</button>

关于javascript - React jQuery 无法将元素识别为 Bootstrap 模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50464512/

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