反應秒錶

Question

你好我最近開始學習反應，我有一些問題。我正在嘗試製作簡單的反應應用程序，我正在製作的其中一個組件是秒錶。現在我遇到了問題，使用從父組件傳遞給我的秒錶組件的道具。 這是我的應用程序組件：

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; 

眼下應用程序總是從0開始計數，並進入負。我如何使用從父母傳遞給我的孩子組件的計時器道具？我希望我的秒錶開始時間等於我的計時器道具。當它達到0時如何使倒計時停止？

Answer 1

我該如何使用從父母傳遞給我的孩子組件的計時器道具？我希望我的秒錶開始時間等於我的計時器道具。

在startTimer(timer)您通過timer到stopWatch變量，但你最終使用this.state.stopWatch初始化你的時間間隔。 由於this.state.stopWatch始終爲0，你秒錶將始終爲0。 一種方式開始實現你想要的是你是從道具獲得的價值來初始化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 
} 

還怎麼做倒計時當它達到0時停止？

要做到這一點，你需要一旦定時器到達0您可能還需要檢查是否stopWatch爲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); 
}