добавление jquery для реагирования на состояние компонента и обновление

Question

У меня есть checkin и checkout поля и пытаюсь интегрировать pickaday jquery datepicker в свой компонент, который реагирует pickaday. У меня есть поля checkin и checkout как состояние в родительском компоненте и передают их как реквизиты к компоненту datepicker, который я создал. то, что я сделал, использует componentDidMount для инициализации datepicker, и он работает так, как ожидалось. Проблема здесь в том, что я могу только сначала установить minDate, а после этого не обновлять значение из реквизита при изменении состояния.

DatePicker.js.jsx

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}/> 
     ) 
    } 
}); 

В родительском компоненте я вызываю выше компонента, как это (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> 

Я подозреваю, что componentDidMount Неправильное место для обновления состояния при выборе date на datepicker. Может ли кто-нибудь сказать мне, что я делаю неправильно здесь?

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 метода.