第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 React 中按順序處理方法

在 React 中按順序處理方法

白豬掌柜的 2023-07-06 16:44:54
你好,我正在嘗試編寫一個計時器。我的問題是,倒計時應(yīng)該在單擊按鈕后以及狀態(tài)從開始更改為停止時開始,反之亦然。我不知道如何處理它以及將其放在哪個級別。附加信息:單擊按鈕時,它將轉(zhuǎn)到方法處理程序。使用 setstate() 更改狀態(tài),但它在最后呈現(xiàn)。倒計時開始已經(jīng)太晚了。這是游戲組件: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>        );    }}
查看完整描述

2 回答

?
慕萊塢森

TA貢獻1810條經(jīng)驗 獲得超4個贊

您只需要一種方法并在 componentDidMount 中并單擊時調(diào)用它。


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

      

     }


查看完整回答
反對 回復(fù) 2023-07-06
?
料青山看我應(yīng)如是

TA貢獻1772條經(jīng)驗 獲得超8個贊

最終答案:


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

        }         

        

    }


查看完整回答
反對 回復(fù) 2023-07-06
  • 2 回答
  • 0 關(guān)注
  • 195 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號