在反应中加载jquery依赖库

Question

我过去使用过 bootstrap-datepicker，它可以选择让月份日历保持静态（内联），如 here 所示。

我现在正在使用 React（而且对它还很陌生），并且再次需要一个日期选择器。我决定使用 react-bootstrap-date-picker 但是 react-bootstrap-datepicker 没有内联选项。

我不想大量侵入 react-bootstrap-datepicker 的 css，在 react 上加载 jQuery 依赖库（例如 bootstrap-datepicker）的最佳方法是什么？这是不好的做法吗？

这里是加载 bootstrap-datepicker 模块的 JS(jQuery)/HTML 代码。

<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() 函数简单地触发 console.log(1)；

Answer 1

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

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

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

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

    });
}

更新：添加@klaasman 所说的关于销毁或卸载插件的内容。使用componentWillUnmount 生命周期方法：

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

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

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

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

});

相反，您需要像这样提供handleDate 函数：

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