ES6版React.jsでCowntdown Timerを作ってみる

See the Pen countdown timer by uraway (@uraway) on CodePen.

参考：
reactjs - React.jsでFormを扱う - Qiita
Forms | React

タイトル通り。

  class CountdownTimer extends React.Component {

    constructor() {
      super();
      this.tick = this.tick.bind(this);
    	this.state = {
        secondsRemaining: "initial value",
        isStart: false,
      }
    }
   setSeconds (e) {
     this.setState({secondsRemaining: e.target.value});
   }

    tick() {
      this.setState({
        secondsRemaining: this.state.secondsRemaining -1
      });
      if (this.state.secondsRemaining <= 0) {
        clearInterval(this.interval);
        document.getElementById('span').innerHTML='Seconds Remaining: FINISHED';
    }
    }

    start() {
      if(!this.state.isStart ){
        this.interval = setInterval(this.tick, 1000);
        this.setState({
          isStart: true
        });
      }
    }

    stop() {
      if(this.state.isStart){
        clearInterval(this.interval);
        this.setState({
          isStart: false
        });
      }
    }

    reset() {
      clearInterval(this.interval);
      this.setState({
        secondsRemaining:'initial value',
        isStart: false,
      });
 }
 

    componentWillUnmount() {
      clearInterval(this.interval);
    }
    
    render() {
      return (
        <div><span id="span">Seconds Remaining:
        <input type="number" value={this.state.secondsRemaining} onChange={this.setSeconds.bind(this)} /></span>
          <div>
            <button onClick={this.start.bind(this)}>start</button>
            <button onClick={this.stop.bind(this)}>stop</button>
            <button onClick={this.reset.bind(this)}>reset</button>
          </div>
        </div>
      );
    }
  }

  React.render(<CountdownTimer />, document.body);

type="number"なので、入力値は数字のみ受付される。負の数も入力自体は可能。その場合はtick関数内のif文によって、FINISHEDが表示される。HTMLの上書きなので、reset関数は動作しない。ページリロードしなければならない。
入力に関しては、valueをStateで管理しつつ、onChangeで明示的にsetStateして更新。まだちょっとイベントは難しく感じる