import React from "react";
// import ReactDOM from 'react-dom';
import './style.css'
import BtnControl from "./btnControl";

// ===================بررسی شود=============================================
// export var userTime = parseInt(prompt("Enter Your Number"));
var interval;
// var rstUserTime = userTime;

class Timer extends React.Component {
    constructor() {
        super();
        this.state = {
            time: 10,
            // ===================بررسی شود=============================================
            rstUserTime:0
        }
    }
    
    setTime = () => {
        this.setState({
            // ===================بررسی شود=============================================
            time: this.state.time - 1
        })
    }
    
    componentDidMount() {
        // ===================بررسی شود=============================================
        let time = prompt("Enter Your Number")
        this.setState({
            time: time,
            rstUserTime: time
        })
        interval = setInterval(this.setTime, 1000);
    }

    componentDidUpdate() {
        if (this.state.time === 0) {
            clearInterval(interval);
            alert("Time Out!");
        }
    }

    btnStart = () => {
        interval = setInterval(this.setTime, 1000);
    }

    btnStop = () => {
        clearInterval(interval);
    }

    btnReset = () =>{
        this.setState({
            time:this.state.rstUserTime
        })
    }

    render() {
        return (
            <div className="btn">
                <div className="timer">
                    <span>{this.state.time}</span> left
                </div>
                <BtnControl btnStart={this.btnStart} btnStop={this.btnStop} btnReset={this.btnReset} />
            </div>
        )
    }
}

export default Timer;

یک بار کامل این کدها رو بررسی کنید. مربوط به کامپوننت تایمر هست

خیلی ممنون استاد فهمیدم.

userTime رو توی state تعریف کردید و توی DidMount عدد را دریافت کردید.

فقط یه چیزی الان توی این کد توی قسمت return کامپوننت btnControl رو فراخوانی کردیم و از propt میشه استفاده کرد. اما اگه توی قسمت return کامپوننت رو فراخوانی نکرده باشیم چیجوری میشه که از این state.userTime استفاده کرد؟

میخوام بپرسم که با همون روش import { this.state.userTime} from ‘./Timer' میشه استفاده کرد؟ یا یه روش استاندارد تر برای state هست؟

البته داخل {} رو امتحان نکردم درسته یا نه!

بالا و پایین کردم ولی متاسفانه نتونستم که از این روش استفاده کنم

الان مثلا میخوام تو کامپوننت text.js از این userTime که state هست استفاده کنم مثلا وقتی صفر شد یه کارایی بکنه

کمک کنید خیلی ممنون میشم استاد

بله دقیقا متوجه شدم همون اول چی میخواید

یوزر تایم رو باید توی کامپوننت والد یعنی App تعریف کنید و به صورت prop به همه کامپوننت ها که میخوانش ارسال کرد

راه های دیگه هم مثل context و یا redux هست که توضیح دادم جلوتر

خیلی ممنون استاد مرسییی