jquery-timepickerは、反応を使用して小道具の変更を更新しません。

Question

私のリアクションアプリでこのタイムピッカーを使用しようとしています：http://timepicker.co/私はそれの周りにシンプルなクラスを書いて、それに現在の時間を渡す、wheteverそれが変更されたのコンポーネント。

それは次のようになります。

import React, { Component } from 'react'; 
import jQuery from 'jquery'; 

require('../../../node_modules/jquery-timepicker/jquery.timepicker.js'); 

export default class TimePicker extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     minTime: props.minTime || '6', 
     maxTime: props.maxTime || '23', 
     interval: props.interval || 15, 
     defaultTime: props.defaultTime || '10', 
     startTime: props.startTime || '6', 
    }; 
    this.timepicker = {}; 
    this.onChange = this.onChange.bind(this); 
    } 

    onChange(value) { 
    this.setState({ 
     value, 
    },() => { 
     const { onChange } = this.props; 

     if (typeof onChange === 'function') { 
     this.props.onChange(value); 
     } 
    }); 
    } 

    componentDidUpdate() { 
    const { 
     minTime, 
     maxTime, 
     interval, 
     defaultTime, 
     startTime, 
    } = this.state; 
    jQuery(this.timepicker).timepicker({ 
     timeFormat: 'HH:mm', 
     interval, 
     minTime, 
     maxTime, 
     defaultTime, 
     startTime, 
     dynamic: true, 
     dropdown: true, 
     scrollbar: true, 
     change: (value) => { 
     this.onChange(value); 
     }, 
    }); 
    } 

    componentWillReceiveProps(nextProps) { 
    this.setState({ 
     defaultTime: nextProps.defaultTime, 
    }); 
    } 

    componentDidMount() { 
    const { 
     minTime, 
     maxTime, 
     interval, 
     defaultTime, 
     startTime, 
    } = this.state; 

    jQuery(this.timepicker).timepicker({ 
     timeFormat: 'HH:mm', 
     interval, 
     minTime, 
     maxTime, 
     defaultTime, 
     startTime, 
     dynamic: true, 
     dropdown: true, 
     scrollbar: true, 
     change: (value) => { 
     this.onChange(value); 
     }, 
    }); 
    } 

    render() { 
    return (
     <input 
     className="timepicker" 
     ref={(timepicker) => { this.timepicker = timepicker; }} 
     /> 
    ); 
    } 
} 

TimePicker.propTypes = { 
    minTime: React.PropTypes.string, 
    maxTime: React.PropTypes.string, 
    interval: React.PropTypes.number, 
    defaultTime: React.PropTypes.string, 
    startTime: React.PropTypes.string, 
    onChange: React.PropTypes.func, 
}; 

を最初のマウントで、私は新しい時間を渡すと、私はcomponentWillReceivePropsにsetStateに更新されない時間をしようとすると時間がしかし、現在設定されています。

私には何が欠けていますか？

Answer 1

defaultTimeは初期設定に使用しますが、既存のピッカーでは時間を変更しません。 （componentDidUpdateで）以下の変更タイムコードを使用

jQuery(this.timepicker).timepicker({'setTime', TIME);