Question

出于某种原因，我无法使用react-bootstrap。所以我想把bootstrap的功能称为＆＃39; modal＆＃39;但它似乎不起作用，我得到了这个错误：

模态不是函数

这是我在componentDidMount（）中尝试的：

$('#my-modal').modal();

或

ReactDOM.findDOMNode(this.refs.myModal).modal();

或

$(this.refs.myModal).modal();

我的模态：

<div class="modal fade" id="my-modal" ref="myModal">
...
</div>

我想知道是否有针对该问题的解决方案，或者我必须使用一些类似于＆＃39; react-bootstrap＆＃39; ？

谢谢！

更新

确保在＆＃34;模式＆＃34;之前加载了引导程序脚本。函数被调用，我添加了一个按钮：

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#my-modal">Open Modal</button>

单击此按钮时，模式将打开。现在，我使用onSubmit函数

在模态中创建了一个表单

<div class="modal fade" id="my-modal" ref="myModal">
    <form onSubmit={this.testModal}>...</form>
</div>

testModal() {
    // here i tried to call modal('hide') like i did above, but still get the error "modal is not a function"
}

Answer 1

我弄清楚如何解决这个问题。首先，我需要让jQuery全球化（我不知道为什么$没有工作，或者可能是冲突的）

import jQuery from 'jquery';
window.jQuery = jQuery;

然后，我需要在我的js文件中要求bootstrap：

require('bootstrap')
// or just require('bootstrap/js/modal'); require('bootstrap/js/transition');

而不是在index.html中包含此脚本：

<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

现在，我可以致电

jQuery('#my-modal').modal();

更新：我发现如果您不在构造函数中添加jQuery.noConflict(true)，可能会出现问题。

反应调用bootstrap函数？

1 个答案: