Bir mülkün değerini React

Question

adresinden ödünç alma Bu hakkı düzelttiğimi bilmiyorum, bu yüzden benimle birlikte ol. Temel olarak, çalışan bir sayıcı (artışlar veya azaltmalar) olan bir bileşenim var. Diğer bileşen (varsayılan olarak) 25'den 0'a kadar geri sayım yapan bir zamanlayıcıdır.

Daha önce, zamanlayıcıyı yalnızca 25 değerine ayarlamıştım, ancak zamanlayıcı değeri olarak zamanlayıcısını değiştirmeye çalışıyorum. sayaç olarak değişir ve kullanım "başlat" düğmesine basıldığında, zamanlayıcı, sayaç tarafından ayarlanan herhangi bir sayıdan geri sayılır.

Bileşenleri tek tek değil, birlikte çalışabilirim. ayarını this.props.time değerine ayarlamaya çalıştım ve ardından this.state.currentCount değerini değiştirdim, ancak şans yok. Ya zamanlayıcı büyüyor ya da sayacın değerini yansıtmıyor.

Bunun yerine componentWillReceiveProps kullanmalı mıyım emin değilim.

Herhangi bir yardım büyük memnuniyetle karşılanacaktır. Eğer yardımcı olursa, altta bir ekran görüntüsü var.

Oturum Bileşen:

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; 

Saat Bileşen:

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 bileşen ilk olarak 'kazandı ebeveyn bileşeninden sonraki güncellemelerine böylece başlatıldığında sadece çalışır Bu işlevi çalıştır. Eğer yaşam döngüsü olaylar birini kullanmak istediğiniz içinde doğru ve bileşen (eğer aksi halde işlemek için size orada setState ve beklemek gerekmez, çünkü bu durumda componentWillReceiveProps en uygun gibi geliyor componentDidUpdate kullanın.

Bu kodu kontrol değil ama bu ek ile çalışmak gerektiğini düşünüyorum: En zamanlayıcı Start butonuna bağlıdır

const Clock = React.createClass({ 

    ... 

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

    ... 

}); 

Answer 2

çünkü. durumunu startTimer yönteminde ayarlarsanız iyi olur.

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