gpt4 book ai didi

javascript - react 秒表

转载 作者:太空宇宙 更新时间:2023-11-04 15:41:41 33 4
gpt4 key购买 nike

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

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 开始计数并进入负数。如何使用从父组件传递给子组件的计时器 Prop ?我希望我的秒表开始时间等于我的计时器 Prop 。还有如何让倒计时到0时停止?

最佳答案

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

关于javascript - react 秒表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43831783/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com