首页 > 解决方案 > 未捕获的类型错误:$(...).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">&times;</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'));

标签: javascriptjqueryreactjs

解决方案


jQuery 没有modal方法。

有各种插件可以添加这种方法,包括bootstrap

要使用插件,您需要使用 jQuery 注册它。

在传统的 Web 编程中,这是通过以下方式完成的:

  • 添加一个<script>加载 jQuery 并创建jQuery$作为全局变量的元素。
  • 添加一个<script>加载插件的元素,该插件访问这些全局变量之一并修改分配给它的对象。

在您的代码中,您正在为$with分配一个值require。它在本地作用于 JS 模块。如果你加载了 Bootstrap JS,它会<script>在页面中添加带有 a 的插件,那么它会抛出错误,或者将插件与 jQuery 对象的不同副本相关联。

由于您正在使用 React,因此请使用React Bootstrap,它提供诸如 Bootstrap Modal 之类的东西作为 React 组件。


推荐阅读