jqueryに依存するライブラリを反応させてロードする

Question

私は過去にbootstrap-datepickerを使用しました。これは月のカレンダーを静的（インライン）にするオプションを持っています（here）。

私は今、Reactを使っています（それはかなり新しくなっています）。また、再度日付選択ツールが必要です。私は使用することを決めましたreact-bootstrap-date-pickerしかし、react-bootstrap-datepickerにはインラインオプションがありません。

私はreact-bootstrap-datepickerのcssをひどくハックしたくありません。反応したbootstrap-datepickerのようなjQuery依存ライブラリをロードする最も良い方法は何ですか？これは悪い習慣でしょうか？

ここには、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') 
    ); 

}); 

UPDATE：これは、ブートストラップカレンダーをレンダリングするという点でワークアウトをした一方で

だから、私は＃のmy_hidden_​​inputの値が更新されたときに起動するイベントを取得することはできませんよ。私は、render（）関数のdivの値の変化を検出するonChangeイベントを追加しました。

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

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

</div> 

ここで、handleDate（）関数は単にconsole.log（1）を起動します。

Answer 1

jQueryプラグインを初期化する「リアクション」方法は、ライフサイクルメソッドcomponentDidMountで行います。

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

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

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

    }); 
} 

更新：何@klaasman追加破壊したりアンマウントプラグインについて述べました。

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

アップデート2：あなたはhandleDate関数を呼び出すために、イベントを設定していなかったので、onChangeイベントが発射されていないcomponentWillUnmountライフサイクルメソッドを使用します。ここでは、無名関数に変更イベントを設定します。

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

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

}); 

を代わりに、あなたがそうのようなあなたのhandleDate機能を提供する必要があります。

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