Question

我正在为其中包含jquery的react js使用模板。对于jquery，我在index.html中编写了脚本标签，并在componentDidMount（）中编写了jquery代码。现在，它显示daterangepicker错误。我已经在脚本标签中包含了daterangepicker的js文件。我的index.html代码：

 <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900' type='text/css'>
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/fontawesome-all.min.css" />
    <link rel="stylesheet" type="text/css" href="vendor/owl.carousel/assets/owl.carousel.min.css" />
    <link rel="stylesheet" type="text/css" href="vendor/owl.carousel/assets/owl.theme.default.min.css" />
    <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

  <script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="vendor/bootstrap-spinner/bootstrap-spinner.js"></script> 
<script src="vendor/daterangepicker/moment.min.js"></script> 
<script src="vendor/daterangepicker/daterangepicker.js"></script> 


<script src="js/theme.js"></script>

另外，带有jquery的react组件如下：

import React, {Component} from 'react';
 import moment from 'moment';

import $ from 'jquery';
// const $ = window.$;
window.jQuery = $;
window.$ = $;

class Layout extends Component {
    componentDidMount () {
        // $(function() {
            'use strict';
             // Depart Date
             $('#busDepart').daterangepicker({
               singleDatePicker: true,
               minDate: moment(),
               autoUpdateInput: false,
               }, function(chosen_date) {
             $('#busDepart').val(chosen_date.format('MM-DD-YYYY'));
             });
        //    });
    }

    render()
    {
        return(
//....code remaining

Answer 1

我也遇到了这个问题，并且在互联网上找不到任何资源。最后，我注意到您无法使用jquery在react项目中实现任何库函数。您应该维护react方法，这意味着您应该使用react库。

使用npm首先安装daterangepicker

npm install react-datepicker --save

然后将这两行添加到您要在其中添加daterangepicker的文件中

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

然后在您的类中定义您以我的方式使用过的daterangepicker事件代码，看看是否有帮助。

class Search extends Component {

    constructor(props){
        super(props);

        this.state = {
            startDate: '',
            endDate: ''
        };

        this.handleStateDateChange = this.handleStateDateChange.bind(this);
        this.handleEndDateChange = this.handleEndDateChange.bind(this);
    }

    handleStateDateChange(date){
        this.setState({
            startDate: date
        });
    }

    handleEndDateChange(date){
        this.setState({
            endDate: date
        });
    }

最后进入render函数，只需调用DatePicker模块

render() {
        return (
            <div>

                {/* Date Picker Start */}
                <div class="container-fluid">
                    <div class="Datecontent">
                        <label><b>Date Range Search</b></label>
                        <br />
                            <DatePicker
                                selected={this.state.startDate}
                                onChange={this.handleStateDateChange}
                                className='form-control'
                                placeholderText='Start Date'
                            />


                            <DatePicker
                                selected={this.state.endDate} 
                                onChange={this.handleEndDateChange}
                                className='form-control'
                                placeholderText='End Date'
                            />
                    </div>
                </div>
                {/* Date Picker End */}
            </div>
        );
    }
}

export default Search;

就是这样，它可以运行项目谢谢您。

TypeError：jquery__WEBPACK_IMPORTED_MODULE_7 ___ default（...）（...）。当将带有查询js的jquery使用时，daterangepicker不是函数

1 个答案: