javascript - 未捕获的类型错误:$(...).modal 不是函数
问题描述
因此,这段代码应该显示 JQuery 表,并且在第三列中,每一行都是可点击的,当点击时它会显示一个 Modal。
当我启动代码时,表格显示,当我单击第三行时,警报测试有效,但模式没有显示,并且在控制台中打印了错误日志:
UnCaught TypeError: topics.jsx
$(...).modal is not a function
很明显 .click(function()) 中的显示模式函数不起作用,来自 StackOverflow 的一些类似问题是这样说bootstrap.min.js
并且jquery.min.js
没有被引用,但我不确定是否是这种情况,因为我在此使用这些库页面没问题。
我该如何解决?
主题.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import PropTypes from 'prop-types';
import Navbar, { MENU as MAIN_MENU } from '../../components/Navbar';
import TopicFilter from '../../components/TopicFilter';
import PeriodTag from '../../components/PeriodTag';
import LecturerInfo from '../../components/LecturerInfo';
import Layout from '../../components/layouts';
import { Nav, NavItem, NavLink, Collapse, Modal, ModalBody, ModalHeader, Button, Form, FormGroup, FormInput, Alert } from "shards-react";
var $ = require('jquery');
var dt = require('datatables.net')();
class TopicTable extends React.Component {
constructor(props) {
super(props);
$(document).ready(() => {
$('#topic-table').DataTable({
data: this.props.topics || [],
columns: [
{ data: 'id', visible: false }, //id
{ data: 'name' }, //name
{ data: 'quota' }, //quota
{ data: 'deskripsi'}, //DESKRIPSI
{ data: 'kk', visible: false }, //kk
{ data: 'peminatan', render: 'abbrev' }, //peminatan
{ data: 'period', render: 'semester' }, //period
{ //lecturer
data: 'lecturer',
/*render: function(data, type, row, meta) {
if (type=='display') {
const lecturerInfo = (
<LecturerInfo
nik={data.nik}
name={data.name}
lecturerCode={data.lecturerCode}
/>
);
return ReactDOMServer.renderToString(lecturerInfo)
}
}*/
render: 'name'
},
{ data: 'isDeleted', visible: false } //isDeleted
]
})
$('#topic-table').find('td:nth-child(3)').click(function() {
alert($(this).html());
$('#myModal').modal('show'); //FUNCTION TO SHOW MODAL
});
})
}
componentDidUpdate() {
$(function () {
$('[data-toggle="popover"]').popover()
})
}
render() {
return (
<div>
//MODAL
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
//TABLE
<table id="topic-table">
<thead>
<tr>
<th bgcolor="#E8E8E8">Id</th>
<th bgcolor="#E8E8E8">Topik</th>
<th bgcolor="#E8E8E8">Quota</th>
<th bgcolor="#E8E8E8">Deskripsi</th>
<th bgcolor="#E8E8E8">KK</th>
<th bgcolor="#E8E8E8">Peminatan</th>
<th bgcolor="#E8E8E8">Semester</th>
<th bgcolor="#E8E8E8">Dosen</th>
<th bgcolor="#E8E8E8">sudah dihapus</th>
</tr>
</thead>
</table>
</div>
)
}
}
TopicTable.propTypes = {
topics: PropTypes.arrayOf(PropTypes.object)
}
function Page() {
const { currentPeriod, topics, peminatanList } = window.SAILS_LOCALS;
return (
<div className="page main-content-container px-4 pb-4 container-fluid">
{/* <Navbar activeMenu={MAIN_MENU.TOPICS} /> */}
<div className="container">
<h2 class="display-4">Daftar Topik <PeriodTag period={currentPeriod} /></h2>
<div>
<TopicFilter peminatanList={peminatanList} />
<TopicTable topics={topics} />
</div>
</div>
</div>
)
}
ReactDOM.render(<Layout><Page /></Layout>, document.getElementById('root'));
解决方案
jQuery 没有modal
方法。
有各种插件可以添加这种方法,包括bootstrap。
要使用插件,您需要使用 jQuery 注册它。
在传统的 Web 编程中,这是通过以下方式完成的:
- 添加一个
<script>
加载 jQuery 并创建jQuery
和$
作为全局变量的元素。 - 添加一个
<script>
加载插件的元素,该插件访问这些全局变量之一并修改分配给它的对象。
在您的代码中,您正在为$
with分配一个值require
。它在本地作用于 JS 模块。如果你加载了 Bootstrap JS,它会<script>
在页面中添加带有 a 的插件,那么它会抛出错误,或者将插件与 jQuery 对象的不同副本相关联。
由于您正在使用 React,因此请使用React Bootstrap,它提供诸如 Bootstrap Modal 之类的东西作为 React 组件。
推荐阅读
- python - 如何将下面 [10] 中的这 2 列转换为数据框/表,以便能够导出到 csv 文件
- lightgbm - 如何将优化的参数作为列表传递给 light gbm?
- html - 浏览器何时读取输入类型=文件中选择的文件
- c# - 在 SpecFlow 测试中使用 ChromeDriver
- java - ExoPlayer 直播在 Askey Android 电视盒上冻结,音频继续
- javascript - 如何在滚动时隐藏标题导航,并在滚动停止时显示
- selenium - 如何在 reportng(html 文件)中添加堆栈跟踪以通过测试?
- google-compute-engine - 谷歌计算引擎没有响应
- java - 如何使用 JavaFX 导出应用程序,以便没有它的用户可以运行该应用程序
- ios - Сocoapods 中继 URL 无法下载