在react中加载jquery依赖库

Question

我在过去使用引导日期选择器，它有一个选项，让一个月的日历保持静态（内联），如图所示。

我现在正在使用React（我对它还很陌生），需要一个日期选择器。我决定使用react引导日期选择器，但是react引导日期选择器没有内联选项。

我不想大量侵入react引导数据采集器的css，在react上加载jQuery依赖库（如引导数据采集器）的最佳方法是什么？这会是坏习惯吗？

下面是用于加载bootstrap-datepicker模块的JS（jQuery）/超文本标记语言代码。

<div id="datepicker" data-date="12/03/2012"></div>
<input type="hidden" id="my_hidden_input">

$('#datepicker').datepicker();

$('#datepicker').on('changeDate', function() {

    $('#my_hidden_input').val(
        $('#datepicker').datepicker('getFormattedDate')
    );

});

更新：

因此，虽然这在呈现引导日历方面做了一些工作，但当#my_hidden_input的值已更新时，我无法启动事件。我添加了一个onChange事件来检测render（）函数中div的值更改。

<div id="datepicker"></div> 

    <div id="#my_hidden_input" onChange={this.handleDate}>

</div> 

其中handleDate（）函数只是触发控制台。日志（1）；

Answer 1

初始化jQuery插件的“React”方法是在componentDidMount生命周期方法中进行初始化。

componentDidMount(){
    $('#datepicker').datepicker();

    $('#datepicker').on('changeDate', function() {

        $('#my_hidden_input').val(
            $('#datepicker').datepicker('getFormattedDate')
        );

    });
}

更新：添加@klasman关于销毁或卸载插件的内容。使用组件将卸载生命周期方法：

componentWillUnmount(){
    $('#datepicker').destroy();
}

更新2:onChange事件未触发，因为您没有将事件设置为调用handleDate函数。在这里，您将更改事件设置为匿名函数：

$('#datepicker').on('changeDate', function() {

    $('#my_hidden_input').val(
        $('#datepicker').datepicker('getFormattedDate')
    );

});

相反，您需要提供handleDate函数，如下所示：

$('#datepicker').on('changeDate', this.handleDate);