反应秒表

Question

大家好，我最近开始学习 React，但遇到了一些问题。我正在尝试制作简单的反应应用程序，我正在制作的组件之一是秒表。现在，我在使用从父组件传递到 Stopwatch 组件的道具时遇到问题。这是我的应用组件：

import React, {Component} from 'react';
import { Form,FormControl, Button} from 'react-bootstrap';

// Compoenents
import Clock from './Clock';
import Stopwatch from './Stopwatch';

// CSS
import './css/app.css';

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            deadline: 'December 31, 2017',
            newDeadline: '',
            timer: 60,
            newTimer: ''
        }
    }

    changeDeadline () {
        this.setState({deadline: this.state.newDeadline});
    }

    checkTimer() {
        this.setState({timer: this.state.newTimer});
    }

    render() {
        return (
            <div className='app'>
                <div className='appTitle'>
                    Countdown to {this.state.deadline}
                </div>
                <Clock 
                    deadline={this.state.deadline} // This is how we send props to our child component
                />
                <Form inline={true} >
                    <FormControl 
                        className='deadlineInput'
                        type="text" 
                        placeholder='Write date to check' 
                        onChange={event => this.setState({newDeadline: event.target.value})}
                        onKeyPress={event =>  {
                            if(event.key === 'Enter') {
                                event.preventDefault();
                                this.changeDeadline();;
                            }
                        }}
                    />
                    <Button 
                        onClick={() => this.changeDeadline()} 
                    >
                        Submit
                    </Button>
                </Form>

                <div className='stopwatchTitle'>
                    Use stopwatch to {this.state.timer} seconds
                </div>
                <Stopwatch 
                    timer={this.state.timer} // This is how we send props to our child component
                />
                <Form inline={true} >
                    <FormControl 
                        className='timerInput'
                        type="text" 
                        placeholder='Set your timer' 
                        onChange={event => this.setState({newTimer: event.target.value})}
                        onKeyPress={event =>  {
                            if(event.key === 'Enter') {
                                event.preventDefault();
                                this.checkTimer();;
                            }
                        }}
                    />
                    <Button 
                        onClick={() => this.checkTimer()} 
                    >
                        Start
                    </Button>
                </Form>
            </div>
        )
    }
}

export default App;

这是我的秒表组件：

import React, {Component} from 'react';


// CSS
import './css/stopwatch.css';

class Stopwatch extends Component {

    constructor(props) {
        super(props);
        this.state = {
            stopWatch: 0,
        }
        this.decrementer = null;
    }

    // This function runs before component completely renders on the application (otherwise we might create infinite loop)
    componentWillMount() {
        this.startTimer(this.props.timer);
    }

    startTimer(timer) {

        let stopWatch = timer;
        console.log(stopWatch)

        this.decrementer = setInterval( () =>
            this.setState({
            stopWatch: this.state.stopWatch - 1
        })
        , 1000);

    }

    render() {
        return (
            <div>
                <div className='myStopwatch'> {this.state.stopWatch} seconds</div>
            </div>
        )
    }

}

export default Stopwatch;

现在应用程序总是从 0 开始计数并进入负数。我如何使用我从父组件传递给我的子组件的计时器道具？我希望我的秒表开始时间等于我的计时器道具。还有如何让倒计时到0时停止？

Answer 1

How can I use my timer props that I pass down from my parent to my child component ? I want my stopwatch starting time be equal to my timer props.

在 startTimer(timer) 上，您将 timer 传递给 stopWatch 变量，但最终使用 this.state.stopWatch 来初始化间隔。由于 this.state.stopWatch 始终为 0，您的秒表将始终从 0 开始。实现您想要的目标的一种方法是使用您从 props 收到的值初始化 this.state.stopWatch：

constructor(props) {
    super(props);
    this.state = {
        stopWatch: props.timer
    }
    this.decrementer = null;
}

componentWillMount() {
    this.startTimer(); // now you dont need to pass timer because is already in your local state
}

Also how to make countdown stop when it reaches 0 ?

为此，您需要在计时器达到 0 时清除间隔。您可能还想检查 stopWatch 是否为 0 以防止开始间隔：

startTimer() {


    if(!this.state.stopWatch) return; // check if stopWatch is 0

    this.decrementer = setInterval( () => {
        const stopWatch = this.state.stopWatch - 1;        

        this.setState({ stopWatch });

        if(stopWatch < 1) clearInterval(this.decrementer); // clears interval one stopWatch reaches 0

    }, 1000);
}

反应秒表

React stopwatch

javascript

reactjs

countdown