gibt es eine Möglichkeit, Variable innerhalb einer Funktion außerhalb in Reaktion übergeben

Question

Ich bin neu zu reagieren, und ich versuche, eine einfache Countdown-App zu machen. aber in Reaktion, ich weiß nicht, wie man eine globale Variable für alle Funktionen geben kann, um es zu beurteilen. Bitte schauen Sie sich meinen Code an, kann ich die Pause trotzdem machen und die Fortfahren-Buttons funktionieren? In einfachem JavaScript kann ich Timer als globale Variable einstellen und bekomme Zugriff darauf von einer anderen Funktion, dadurch kann ich ClearInterval auf Timer, wenn ich will, aber ich weiß nicht, wie man ClearInterval für den Timer zu pausieren, beginnen zu starten Funktion, da sie im Begin-Funktionsblock eingeschränkt ist.

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

Sie können wie folgt tun:

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')); 

Arbeits Code here

Answer 2

Warum nicht den Beginn in der Reaktionskomponente deklarieren. Sie müssen den Status auch aktualisieren, wenn der Countdown beginnt. Ich empfehle Ihnen einen Blick auf https://reactjs.org/tutorial/tutorial.html.