거기에 방법을 외부에있는 함수의 내부 변수를 전달하는 것입니다

Question

나는 반응이 새로운 오전, 그리고 간단한 카운트 다운 애플 리케이션을 만들려고합니다. 그러나 반응에서, 나는 모든 기능에 대한 전역 변수를 부여하는 방법을 알지 못한다. 제 코드를 살펴 보시고 어쨌든 일시 중지를하고 계속 버튼을 사용할 수 있습니까? 일반 자바 스크립트에서 전역 변수로 타이머를 설정하고 다른 함수에서 해당 함수에 대한 액세스를 얻을 수 있습니다. 원하는 경우 타이머에서 clearInterval을 호출 할 수 있지만 반응에서 타이머를 일시 중지하기 위해 clearInterval을 호출하는 방법을 알지 못합니다. 기능은 시작 기능 블록에서 제한되어 있기 때.입니다.

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

왜 반응 성분 안에 시작을 선언하지 않습니까? 카운트 다운이 시작되면 상태를 업데이트해야합니다. https://reactjs.org/tutorial/tutorial.html을 살펴 보시기 바랍니다.