在 React 中按顺序处理方法

Question

你好，我正在尝试编写一个计时器。我的问题是，倒计时应该在单击按钮后以及状态从开始更改为停止时开始，反之亦然。我不知道如何处理它以及将其放在哪个级别。附加信息：单击按钮时，它将转到方法处理程序。使用 setstate() 更改状态，但它在最后呈现。倒计时开始已经太晚了。这是游戏组件：import React, { Component } from 'react';import './Game.css';import Timer from './Timer'class Game extends Component {    constructor() {        super();    }    state = {                buttonStatus: {status:"Start" , classButton:"Button ButtonBackgroundColorGrey" },        dotclass : "",        timer: 60         }    componentDidMount() {        this.timersignal();           }        buttonclick = () =>{                (this.state.buttonStatus.status === "Start")         ? this.setState({buttonStatus:{status:"Stop",classButton:"Button ButtonBackgroundColorRed"},dotclass:"Dot"})         : this.setState({buttonStatus:{status:"Start",classButton:"Button ButtonBackgroundColorGrey"},dotclass:""})                       this.componentDidMount();    }        timersignal = () => {        if(this.state.buttonStatus.status === "Stop") {            this.Interval = setInterval(() =>{                this.setState(() => ({                    timer : this.state.timer - 1                }))            },1000)                console.log("didMount start")           }           else(               console.log("didMount stop")           )    }         render() {        return (            <div>                <div className="Body-Container">                                                           <h2 className="States"> Time </h2>                    <Timer buttonstate= {this.state.timer}/>                    <button className={this.state.buttonStatus.classButton} onClick={this.buttonclick}>{this.state.buttonStatus.status}</button>                </div>            </div>        );    }}

Answer 1

您只需要一种方法并在 componentDidMount 中并单击时调用它。

    timerToggle = () =>{

        if((this.state.buttonStatus.status === "Start") {

            this.setState({buttonStatus:{status:"Stop",classButton:"Button ButtonBackgroundColorRed"},dotclass:"Dot"})

    

            clearInterval(this.Interval);

        }else{

            this.setState({buttonStatus:{status:"Start",classButton:"Button ButtonBackgroundColorGrey"},dotclass:""})  ;

            this.Interval = setInterval(() =>{

                this.setState(() => ({

                    timer : this.state.timer - 1

                }))

            },1000)

        }

    

    }    

 componentDidMount() {

        this.timerToggle();

      

     }

Answer 2

最终答案：

timerToggle = () =>{       

        

        if(this.state.buttonStatus.status === "Start") {

            this.setState({buttonStatus:{status:"Stop",classButton:"Button ButtonBackgroundColorRed"},dotclass:"Dot"})

            this.Interval = setInterval(() =>{

            

                this.setState(() => ({

                    timer : this.state.timer - 1

                }))

            },1000)

            

        }

        else{

            this.setState({buttonStatus:{status:"Start",classButton:"Button ButtonBackgroundColorGrey"},dotclass:""})  ;

            

            clearInterval(this.Interval);

        }         

        

    }