轉換計時器以作出反應

仍在學習反應，並且有幾個我試圖瞭解的實例&道具。希望有人能告訴我如何轉換下面的東西。轉換計時器以作出反應

const display = document.querySelector('#time'); 
 
    const countdown = new CountDownTimer(120); 
 
    const timeObj = CountDownTimer.parse(120); 
 

 
    format(timeObj.minutes, timeObj.seconds); 
 

 
    countdown.onTick(format); 
 

 
    document.querySelector('button').addEventListener('click',() => { 
 
     countdown.start(); 
 
    }); 
 

 
    function format(minutes, seconds) { 
 
     minutes = minutes < 10 ? `0${minutes}` : minutes; 
 
     seconds = seconds < 10 ? `0${seconds}` : seconds; 
 
     display.textContent = `${minutes}:${seconds}`; 
 
    }

<script src="https://cdn.rawgit.com/robbmj/simple-js-countdown-timer/master/countdowntimer.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<body> 
 
    <button>Start Count Down</button> 
 
    <div>Registration closes in <span id="time"></span> minutes!</div> 
 
</body>

來源

2017-06-29 Dave Bergschneider

我建議丟棄countdowntimer.js和剛剛建立自己的項目做出反應從頭開始。您應該可以使用單個React組件完成此操作。發佈您的嘗試可能會在需要的地方爲您提供更多幫助。 :) – jmargolisvt

所有你需要做的是使一個反應類，它是你的計時器。

這是一個粗略的概述，你可能需要玩一點數據..但應該讓你開始。請注意，它接受毫秒轉換成秒，分鐘

class Timer extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      ms: props.ms 
     } 
    } 
    componentWillMount() { 
     this.interval = setInterval(() => { 
      if ((this.state.ms) <= 0) { 
       clearInterval(this.interval); 
       this.forceUpdate(); 
       return; 
      } 
      this.setState({ms: this.state.ms - 1000}); 
     }, 1000) 
    } 
    componentWillUnmount() { 
     clearInterval(this.interval); 
    } 
    format() { 
     const { ms } = this.state; 
     let seconds = Math.floor(ms/1000); 
     let minutes = Math.floor(seconds/60); 

     minutes = minutes < 1 ? '00' : minutes < 10 ? `0${minutes}` : minutes; 
     seconds = seconds < 1 ? '00' : seconds < 10 ? `0${seconds}` : seconds; 
     return `${minutes}:${seconds}`; 
    } 
    render() { 
     return (
      <div>{this.format(this.state.ms)}</div> 
     ) 
    } 
}

你會使用它的方式是一樣的東西......

<Timer ms={15000} />

來源

2017-06-29 20:12:52

謝謝。我看到你在道具上通過它所做的事情。絕對需要調整數字，但這對我來說是一個很好的開始。 –

我已經通過mod修復了數據秒=秒％60;秒=秒<10？ \'0 $ {seconds} \'：秒;'。有沒有一種方法可以通過一個動作在組件中包含或啓動''？我的具體需求是我打開這個模式，所以我只希望這個計時器在模態打開時啓動，一旦關閉就清除。 –

@DaveBergschneider你正在描述條件渲染的東西。有很多如何做的例子，我建議你做一些研究。但這個想法是在按鈕單擊你設置一個狀態，顯示模態。當你去顯示模態時，你可以通過顯示模態的相同方式有條件地渲染子模態。 '{this.state.someFlagToShowModal？：null}' –

轉換計時器以作出反應

回答

相關問題