jqueryを反応コンポーネントに追加して状態を更新する

Question

私はcheckinとcheckoutのフィールドを持ち、pickaday jquery datepickerを反応コンポーネントpickadayに統合しようとしています。私はチェックインとチェックアウトの両方のフィールドを親コンポーネントの状態として持っていて、作成したコンポーネントのdatepickerにそれらを渡します。私がしたのはcomponentDidMountを使ってを初期化し、それが期待どおりに動作することです。ここでの問題は、最初にminDateを設定できるのは、状態が変わるときに値を更新しないということだけです。

DatePicker.js.jsx私はこのようなコンポーネント（minDateは私が唯一の初期負荷で動作します渡し、その後動作していない??）

  {/*Checkin and checkout dates*/} 
      <div className="col s12 m6 l6 rd-custom-input"> 
       <DatePicker name={'checkIn'} value={this.props.checkIn} 
          onChange={this.handleNamedChange} minDate={this.props.checkIn}/> 
      </div> 
      <div className="col s12 m6 l6 rd-custom-input"> 
       <DatePicker name={'checkOut'} value={this.props.checkOut} 
          onChange={this.handleNamedChange} minDate={this.props.checkIn}/> 
      </div> 

の上に呼び出す親コンポーネントで

var DatePicker = React.createClass({ 
//This is a callback to parent component for updating the state 
    changeDuration: function (date) { 
     this.props.onChange(this.props.name, date); 
    }, 


    componentDidMount: function() { 
     var _self = this; 

     var picker = new Pikaday({ 
      field: document.getElementById(this.props.name), 
      format: 'D MMM YYYY', 
      onSelect: function() { 
       _self.changeDuration(this.getMoment().toDate()) 
      }, 
      minDate: this.props.minDate 
     }); 
    }, 


    render: function() { 
     return (
      <input type="text" id={this.props.name} defaultValue={this.props.value}/> 
     ) 
    } 
}); 

dateをdatepickerに選択すると、componentDidMountの状態が間違っていると思われます。誰かが私に何が間違っているのか教えてもらえますか？

Answer 1

これは、コンポーネントがマウントされてからcomponentDidMountライフサイクルイベントが発生し、探しているものがrenderメソッドで何かを実行するためです。

var DatePicker = React.createClass({ 

    picker: null, 

    changeDuration: function (date) { 
     this.props.onChange(this.props.name, date); 
    }, 


    componentDidMount: function() { 
     var _self = this; 

     var picker = new Pikaday({ 
      field: document.getElementById(this.props.name), 
      format: 'D MMM YYYY', 
      onSelect: function() { 
       _self.changeDuration(this.getMoment().toDate()) 
      }, 
      minDate: this.props.minDate 
     }); 

     this.picker = picker; 
    }, 


    render: function() { 

     if(this.picker){ 
      this.picker.setMinDate(this.props.minDate); 
     } 
     return (
      <input type="text" id={this.props.name} defaultValue={this.props.value}/> 
     ) 
    } 
}); 

だからこのケースでは、あなたはpickerと呼ばれるクラスのプロパティでピッカーを保存し、後であなたはそれがgotoDate法だ呼び出すことができますレンダリング。