我过去使用过bootstrap-datepicker,它可以选择让月历保持静态(内联),如图所示here .
我现在正在使用React(并且我很擅长),并且需要再次使用日期选择器 . 我决定使用react-bootstrap-date-picker但是react-bootstrap-datepicker没有内联选项 .
我不想深入入侵react-bootstrap-datepicker的css,加载一个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);
1 回答
初始化jQuery插件的方法是在
componentDidMount
生命周期方法中执行此操作 .Update: 添加@klaasman关于销毁或卸载插件的内容 . 使用
componentWillUnmount
生命周期方法:Update 2:
onChange
事件未设置事件以调用handleDate
函数 . 在这里,您将change事件设置为匿名函数:相反,您需要提供
handleDate
函数,如下所示: