は、反応の外部にある関数の変数を内部に渡す方法です

Question

私は反応が新しく、簡単なカウントダウンアプリを作ろうとしています。しかし、反応では、私はどのようにすべての機能のためのグローバル変数を与えることができるか分からない評価することができます。私のコードを見てください、とにかく私は一時停止を作ることができますし、続行ボタンが機能しますか？プレーンなjavascriptで私はグローバル変数としてタイマーを設定し、別の関数からそれにアクセスすることができます、私は、私が欲しいときにタイマーでclearIntervalを呼び出すことができますが、私はどのようにタイマーの休止を開始するclearIntervalを呼び出すかわからないこれはbegin関数ブロックで制限されているためです。

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Countdown extends React.Component{ 
    render(){ 
     return(
      <div> 
       <button onClick={()=>begin()}>start</button> 
       <button>pause</button> 
       <button>continue</button> 
      </div> 
     ); 
    } 
}; 

const begin=(props)=>{ 
    let count = 10; 
    const timer = setInterval(countdown,1000); 
    function countdown(){ 
     count=count-1 
     if (count<0){ 
      clearInterval(timer); 
      return; 
     } 
     console.log(count) 
    } 
} 

ReactDOM.render(<Countdown/>, document.getElementById('app')); 

Answer 1

あなたはこのように行うことができます。

class Countdown extends React.Component{ 
    constructor() { 
     super(); 
     //set the initial state 
     this.state = { count: 10 }; 
    } 
    //function to change the state 
    changeCount(num){ 
     this.setState({count:num}); 
    } 
    render(){ 
     return(
      <div> 
       <button onClick={()=>begin(this.changeCount.bind(this), this.state.count)}>start</button> 
       <button>pause</button> 
       <button>continue</button> 
       <p>{this.state.count}</p> 
      </div> 
     ); 
    } 
}; 
//callback function to change the state in component 
//c is the initial count in state 
const begin=(fun, c)=>{ 
    let count = c; 
    const timer = setInterval(countdown,1000); 
    function countdown(){ 
     count=count-1 
     if (count<0){ 
      clearInterval(timer); 
      return; 
     } 
     fun(count) 
     console.log(count) 
    } 
} 

ReactDOM.render(<Countdown/>, document.getElementById('example')); 

作業コードhere

Answer 2

なぜ反応コンポーネント内にbeginを宣言しないのですか？カウントダウンが始まると、状態を更新する必要があります。 https://reactjs.org/tutorial/tutorial.htmlをご覧ください。