在 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 中并单击时调用它。&nbsp; &nbsp; timerToggle = () =>{&nbsp; &nbsp; &nbsp; &nbsp; if((this.state.buttonStatus.status === "Start") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({buttonStatus:{status:"Stop",classButton:"Button ButtonBackgroundColorRed"},dotclass:"Dot"})&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(this.Interval);&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({buttonStatus:{status:"Start",classButton:"Button ButtonBackgroundColorGrey"},dotclass:""})&nbsp; ;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.Interval = setInterval(() =>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState(() => ({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timer : this.state.timer - 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },1000)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp;componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; this.timerToggle();&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;}

Answer 2

最终答案：timerToggle = () =>{&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if(this.state.buttonStatus.status === "Start") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({buttonStatus:{status:"Stop",classButton:"Button ButtonBackgroundColorRed"},dotclass:"Dot"})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.Interval = setInterval(() =>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState(() => ({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timer : this.state.timer - 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },1000)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({buttonStatus:{status:"Start",classButton:"Button ButtonBackgroundColorGrey"},dotclass:""})&nbsp; ;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(this.Interval);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }