首页 文章

加载jquery依赖库进行反应

提问于
浏览
0

我过去使用过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 回答

  • 3

    初始化jQuery插件的方法是在 componentDidMount 生命周期方法中执行此操作 .

    componentDidMount(){
        $('#datepicker').datepicker();
    
        $('#datepicker').on('changeDate', function() {
    
            $('#my_hidden_input').val(
                $('#datepicker').datepicker('getFormattedDate')
            );
    
        });
    }
    

    Update: 添加@klaasman关于销毁或卸载插件的内容 . 使用 componentWillUnmount 生命周期方法:

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

    Update 2: onChange 事件未设置事件以调用 handleDate 函数 . 在这里,您将change事件设置为匿名函数:

    $('#datepicker').on('changeDate', function() {
    
        $('#my_hidden_input').val(
            $('#datepicker').datepicker('getFormattedDate')
        );
    
    });
    

    相反,您需要提供 handleDate 函数,如下所示:

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

相关问题