反応カウントダウンアプリにこだわり、setIntervalを適切に利用する方法を知りたがっています

Question

setInterval関数が時間を減らさない理由を知りたかっただけです.... isnt setIntervalは関数を何度も何度もやり直すことを想定していますか？私は100に入れ、プレス提出した場合、それはこれがapp.jsx [ファイル] - ユーザーがここで秒単位で番号を入力すると、それは、クロックに行くで1

class Clock extends Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
     seconds: 60, 
     } 
     console.log('this.props',this.props); 
     console.log('seconds', this.state.seconds); 
    } 

    componentWillMount(){ 
     this.timer(this.props.time); 
    } 

    componentDidMount(){ 
     setInterval(()=> this.timer(this.props.time),1000); 
    } 

    timer(time){ 
     console.log('new time',time) 
     this.setState({seconds:time-1}); 
     } 

     render(){ 
     return (
      <div> 
      <div className="Clock-seconds">{this.state.seconds} seconds</div> 
      </div> 
     )}} 

でダウン1行くことを期待していた 小道具私は州で時間があります。

import React, {Component} from 'react'; 
import Clock from './Clock'; 
import './App.css'; 
import {Form, FormControl, Button} from 'react-bootstrap'; 


class App extends Component{ 
    constructor(props){ 
    super(props); 
    this.state ={ 
     time: '60', 
     newTime: '' 
    } 
    } 

    changeTime(){ 
    this.setState({time: this.state.newTime}); 
    } 


    render(){ 
    return (
     <div className="App"> 
     <div className = "App-title"> 
      Countdown to {this.state.time} 
     </div> 

     <Clock 
     time={this.state.time} 
      /> 

     <Form inline > 
      <FormControl 
      className="Deadline-input" 
      placeholder='new date' 
      onChange={event => this.setState({newTime: event.target.value})} 
      /> 
      <Button onClick={() => this.changeTime()}> 
      Submit 
      </Button> 
     </Form> 

     </div> 
    ) 
    } 
} 

export default App; 

Answer 1

あなたはタイマー機能の状態を設定するたびに、あなたは変化しないthis.props.time、のオフにそれを基づかしている、状態が実際に変更れるものです。したがって、前の状態に基づいて状態を設定する必要があります。また、コンストラクタで秒の状態を60に設定しているのはなぜですか？ this.props.timeに設定したくないのですか？

class Clock extends Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     seconds: this.props.time, 
    } 
    console.log('this.props',this.props); 
    console.log('seconds', this.state.seconds); 
    } 

    componentWillMount(){ 
    this.timer(this.props.time); 
    } 

    componentDidMount(){ 
    setInterval(()=> this.timer(),1000); 
    } 

    timer(){ 
    console.log('new time', this.state.seconds) 
    this.setState(prevState => ({ 
     seconds: prevState.seconds - 1 
    })); 
    } 

    render() { 
    return (
     <div> 
     <div className="Clock-seconds">{this.state.seconds} seconds</div> 
     </div> 
    ); 
    } 
} 

EDIT：私は、これはあなたが達成しようとしているものであると考えてい

あなたの編集のオフに基づいては、ここでそれはのように思えたので、唯一のアプリケーションコンポーネントなしクロック成分を持っている私の新しいソリューションです次の2つの異なるコンポーネントで同じことをやろうとしました：これは、通常のフォームを使用している

class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     seconds: null 
    } 
    } 
    componentDidMount() { 
    setInterval(this.timer.bind(this), 1000); 
    } 
    timer() { 
    if (this.state.seconds) { 
     this.setState(prevState => ({ 
     seconds: prevState.seconds - 1 
     })); 
    } 
    } 
    handleClick(event) { 
    event.preventDefault(); 
    this.setState({seconds: this.textInput.value}); 
    } 
    renderClock() { 
    if (this.state.seconds > 0) { 
     return (<div className = 'App-title'>{this.state.seconds} Seconds</div>); 
    } else if (this.state.seconds === 0) { 
     return (<div className = 'App-title'>Done!</div>); 
    } 
    } 
    render() { 
    return (
     <div className="App"> 
     {this.renderClock()} 
     <form> 
      <input 
      className='Deadline-input' 
      placeholder='new date' 
      ref={input => this.textInput = input} 
      type='text'> 
      </input> 
      <button onClick={event => this.handleClick(event)}>Submit</button> 
     </form> 
     </div> 
    ); 
    } 
} 

、あなたはブートストラップのフォームを使用するように変更することができます。それが何かを混乱させるかどうかは分かりませんが、テストするときはこれが私にとってはうまくいきます。