リアストップウォッチ

Question

こんにちは、私は最近、反応を学び始めました。私は単純な反応アプリを作ろうとしている、私が作っているコンポーネントの一つはストップウォッチです。今私は親コンポーネントから私のStopwatchコンポーネントに渡した小道具を使って問題を抱えています。 これは私のアプリのコンポーネントです：

import React, {Component} from 'react'; 
import { Form,FormControl, Button} from 'react-bootstrap'; 

// Compoenents 
import Clock from './Clock'; 
import Stopwatch from './Stopwatch'; 

// CSS 
import './css/app.css'; 

class App extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      deadline: 'December 31, 2017', 
      newDeadline: '', 
      timer: 60, 
      newTimer: '' 
     } 
    } 

    changeDeadline() { 
     this.setState({deadline: this.state.newDeadline}); 
    } 

    checkTimer() { 
     this.setState({timer: this.state.newTimer}); 
    } 

    render() { 
     return (
      <div className='app'> 
       <div className='appTitle'> 
        Countdown to {this.state.deadline} 
       </div> 
       <Clock 
        deadline={this.state.deadline} // This is how we send props to our child component 
       /> 
       <Form inline={true} > 
        <FormControl 
         className='deadlineInput' 
         type="text" 
         placeholder='Write date to check' 
         onChange={event => this.setState({newDeadline: event.target.value})} 
         onKeyPress={event => { 
          if(event.key === 'Enter') { 
           event.preventDefault(); 
           this.changeDeadline();; 
          } 
         }} 
        /> 
        <Button 
         onClick={() => this.changeDeadline()} 
        > 
         Submit 
        </Button> 
       </Form> 

       <div className='stopwatchTitle'> 
        Use stopwatch to {this.state.timer} seconds 
       </div> 
       <Stopwatch 
        timer={this.state.timer} // This is how we send props to our child component 
       /> 
       <Form inline={true} > 
        <FormControl 
         className='timerInput' 
         type="text" 
         placeholder='Set your timer' 
         onChange={event => this.setState({newTimer: event.target.value})} 
         onKeyPress={event => { 
          if(event.key === 'Enter') { 
           event.preventDefault(); 
           this.checkTimer();; 
          } 
         }} 
        /> 
        <Button 
         onClick={() => this.checkTimer()} 
        > 
         Start 
        </Button> 
       </Form> 
      </div> 
     ) 
    } 
} 

export default App; 

、これは私のストップウォッチコンポーネントです：

import React, {Component} from 'react'; 


// CSS 
import './css/stopwatch.css'; 

class Stopwatch extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      stopWatch: 0, 
     } 
     this.decrementer = null; 
    } 

    // This function runs before component completely renders on the application (otherwise we might create infinite loop) 
    componentWillMount() { 
     this.startTimer(this.props.timer); 
    } 

    startTimer(timer) { 

     let stopWatch = timer; 
     console.log(stopWatch) 

     this.decrementer = setInterval(() => 
      this.setState({ 
      stopWatch: this.state.stopWatch - 1 
     }) 
     , 1000); 

    } 

    render() { 
     return (
      <div> 
       <div className='myStopwatch'> {this.state.stopWatch} seconds</div> 
      </div> 
     ) 
    } 

} 

export default Stopwatch; 

は今のAppは常に0からカウントを開始し、マイナスになります。親から子コンポーネントに渡すタイマーの小道具を使用するにはどうすればよいですか？ストップウォッチの開始時間をタイマーの小道具と同じにしたい。それが0に達するとカウントダウンを止める方法も？

Answer 1

親から子コンポーネントに渡すタイマーの小道具を使用するにはどうすればよいですか？ストップウォッチの開始時間をタイマーの小道具と同じにしたい。

は startTimer(timer)では、あなたは timerから stopWatch変数を渡すが、あなたはあなたの間隔を初期化するために this.state.stopWatchを使用して終了します。

カウントダウンを作成する方法も

constructor(props) { 
    super(props); 
    this.state = { 
     stopWatch: props.timer 
    } 
    this.decrementer = null; 
} 

componentWillMount() { 
    this.startTimer(); // now you dont need to pass timer because is already in your local state 
} 

：this.state.stopWatch以来 は常に0である、あなたは常にあなたが望むものを達成するための一つの方法は、あなたが小道具から受信された値とthis.state.stopWatchを初期化することである0 に開始されますストップウォッチ0になると停止しますか？

あなたはタイマーあなたはまたstopWatchが間隔を開始防ぐために0であるかどうかを確認することをお勧めします0に達するとの間隔をクリアする必要があり、この達成するために：あなたは何を試してみました

startTimer() { 


    if(!this.state.stopWatch) return; // check if stopWatch is 0 

    this.decrementer = setInterval(() => { 
     const stopWatch = this.state.stopWatch - 1;   

     this.setState({ stopWatch }); 

     if(stopWatch < 1) clearInterval(this.decrementer); // clears interval one stopWatch reaches 0 

    }, 1000); 
}