州の州からプロパティの値を借りて返す

Question

私はこの権利を語ったかどうか分かりません。基本的には、機能するカウンタ（インクリメントまたはデクリメント）であるコンポーネントがあります。他のコンポーネントは、（デフォルトでは）25から0にカウントダウンするタイマーです。

これまではタイマーを25に設定していましたが、私はの値としてタイマーを変更しようとしています。カウンタがに変更され、使用開始ボタンが押されるとカウンタはで設定された数からカウントダウンします。

コンポーネントは個別に動作させることはできますが、一緒に動作させることはできません。 私はthis.state.currentCountをthis.props.timeの値に設定してから、this.state.currentCountの値を変更しようとしましたが、運はありません。タイマーが変化しないか、カウンターの値が反映されません。

代わりにcomponentWillReceivePropsを使用する必要があるかどうかわかりません。

ご協力いただければ幸いです。それがまったく役に立ったら、一番下のスクリーンショットがあります。

セッションコンポーネント：

const Session = React.createClass({ 

    getInitialState: function() { 
    return { 
     minutes: 25, 
     seconds: 0 
    }; 
    }, 

    increment: function() { 
    this.setState({ minutes: this.state.minutes + 1 }); 
    }, 

    decrement: function() { 
    this.setState({ minutes: this.state.minutes - 1 }); 
    }, 

    timeToString: function(time) { 
    return time + ':00'; 
    }, 

    render: function() { 
    return (
     <section> 
     <button onClick={this.increment}>+</button> 
     <button onClick={this.decrement}>-</button> 
     {this.state.minutes} 
     <Clock time={this.state.minutes}/> 
     </section> 
    ); 
    } 

}); 

module.exports = Session; 

時計コンポーネント：

const Clock = React.createClass({ 

    getInitialState: function() { 
    return { currentCount: this.props.time }; 
    }, 

    startTimer: function() { 
    var intervalId = setInterval(this.timer, 1000); 
    this.setState({ intervalId: intervalId }); 
    }, 

    pauseTimer: function() { 
    clearInterval(this.state.intervalId); 
    this.setState({ intervalId: this.props.time }); 
    }, 

    timer: function() { 
    var newCount = this.state.currentCount - 1; 
    if (newCount >= 0) { 
     this.setState({ currentCount: newCount }); 
    } else { 
     clearInterval(this.state.intervalId); 
    } 
    }, 

    render: function() { 
    return (
     <section> 
     <button onClick={this.startTimer}>Start</button> 
     <button onClick={this.pauseTimer}>Pause</button> 
     {this.props.time} 
     <br></br> 
     {this.state.currentCount} 
     </section> 
    ); 
    } 

}); 

module.exports = Clock; 

Answer 1

getInitialStateコンポーネントが最初のそれは勝った親コンポーネントから次 更新にそう初期化されるときにのみ実行されますその機能を実行しないでください。あなたはそれ以外の場合は （うあなたはライフサイクルイベントのいずれかを使用することで 正しいであり、この場合にはそこ setStateすることができますので componentWillReceivePropsは、最も適切なように聞こえる、あなたがレンダリングするコンポーネントを待つ必要はありません。 componentDidUpdateを使用してください）。

私はこのコードをチェックしていないが、私はそれが、このほかに動作するはずだと思う：あなたのタイマーがStartボタンに依存するため

const Clock = React.createClass({ 

    ... 

    componentWillReceiveProps: function(nextProps) { 
     // Perhaps pause timer here as well? 
     this.setState({ 
      currentCount: nextProps.time 
     }) 
    }, 

    ... 

}); 

Answer 2

。 startTimerの方法でcurrentCountの状態を設定すると良いでしょう。

startTimer: function() { 
    if(this.state.intervalId) 
    clearInterval(this.state.intervalId); //clear the running interval 

    this.setState({ currentCount: this.props.time }); // reset currentcount 
    var intervalId = setInterval(this.timer, 1000); 
    this.setState({ intervalId: intervalId }); 
},