javascript - 将 React 计时器重置为初始 const 值
问题描述
当我点击重置按钮时,我试图让我的计时器应用程序重置为初始值const initState
,但它只是停止计时器,而不重置值。我在 React + ES6 的 Reset initial state上尝试了许多不同的解决方案,但我得到了相同的结果:reset 按钮只是停止计时器,而没有实际重置值。到目前为止,这是我的代码:
import React, { Component } from 'react';
import moment from 'moment';
import './App.scss';
import TimerHeader from './TimerHeader';
import TimerSettings from './TimerSettings';
import TimerDisplay from './TimerDisplay';
import TimerControls from './TimerControls';
import TimerFooter from './TimerFooter';
//set initial state w/default durations, clock set to 'SESSION', and not running
const initState = {
currentTime: moment.duration(25, 'minutes'),
sessionTime: moment.duration(25, 'minutes'),
breakTime: moment.duration(5, 'minutes'),
label: 'SESSION',
running: false,
timer: null
}
class App extends Component {
constructor(props) {
super(props)
this.state = initState;
this.changeSessionTime = this.changeSessionTime.bind(this);
this.changeBreakTime = this.changeBreakTime.bind(this);
this.switchLabel = this.switchLabel.bind(this);
this.switchTimer = this.switchTimer.bind(this);
this.startTimer = this.startTimer.bind(this);
this.stopTimer = this.stopTimer.bind(this);
this.resetTimer = this.resetTimer.bind(this);
this.countdown = this.countdown.bind(this);
this.playAudio = this.playAudio.bind(this);
}
//new function to set currentTime to either sessionTime or breakTime based on label?
//change the session and/or break times that are displayed
changeSessionTime(newSessionTime) {
this.setState({
currentTime: !this.state.running && this.state.label === 'SESSION' ? newSessionTime.clone() : this.state.currentTime,
sessionTime: newSessionTime
})
}
changeBreakTime(newBreakTime) {
this.setState({
currentTime: !this.state.running && this.state.label === 'BREAK' ? newBreakTime.clone() : this.state.currentTime,
breakTime: newBreakTime
})
}
//change the clock setting when an active timer hits 0
switchLabel() {
this.setState({
label: this.state.label === 'SESSION' ? '\xa0' + 'BREAK' : 'SESSION'
})
}
//change the timer from session to break when an active timer hits 0
switchTimer() {
this.setState({
currentTime: this.state.label === 'SESSION' ? this.state.sessionTime.clone() : this.state.breakTime.clone()
})
}
//start the timer when start button is clicked
startTimer() {
if (this.state.running) {
return
} else {
this.setState({
running: true,
timer: setInterval(this.countdown, 1000)
})
}
}
//stop the timer when stop (i.e., pause) button is clicked
stopTimer() {
if (!this.state.running) {
return
} else {
this.setState({
running: false,
timer: clearInterval(this.state.timer)
})
}
}
//reset the timer when reset button is clicked
resetTimer() {
clearInterval(this.state.timer)
this.setState(initState)
}
//reduce timer by the second when running === true
countdown() {
if (this.state.running) {
this.setState({
currentTime: this.state.currentTime.subtract(1, 'seconds')
})
}
if (this.state.running && this.state.currentTime.get('minutes') <= 0 && this.state.currentTime.get('seconds') <= 0) {
this.playAudio();
this.switchLabel();
this.switchTimer();
}
}
playAudio() {
const beep = document.getElementById("beep");
beep.play();
}
render() {
return (
<div className="container-fluid container-clock">
<TimerHeader />
<TimerSettings currentTime={this.state.currentTime} sessionTime={this.state.sessionTime} breakTime={this.state.breakTime} label={this.state.label} running={this.props.running} changeSessionTime={this.changeSessionTime} changeBreakTime={this.changeBreakTime} />
<TimerDisplay currentTime={this.state.currentTime} />
<TimerControls startTimer={this.startTimer} stopTimer={this.stopTimer} resetTimer={this.resetTimer} />
<TimerFooter />
</div>
);
}
}
export default App;
为什么不resetTimer()
清除现有间隔,然后将初始值放入开头“const initState”中定义的所有值?任何见解都会有所帮助。谢谢!
解决方案
问题是你引用同一个对象然后修改状态,基本上而不是这样做:
this.state = initState;
您需要执行以下操作:
this.state = Object.assign({}, initState);
这将解决您的问题。
推荐阅读
- python - 如何使它成为根据关键字计数自动添加的过程
- python-3.x - 有没有办法使用 scikit learn 的无监督方法将一些列表分为不同的组?
- spring-boot - 由于一段时间内无法访问 Web URL,Springboot 应用程序中出现 504 网关错误
- ios - 如何同步导出和播放视频
- python - 如何从通过 Selenium Webdriver 和 Python 提供的 html 中提取值
- email - 流星电子邮件验证
- arrays - 根据部分填充的向量形成“部分”身份矩阵
- sql - 批量插入单行 SQL
- python - 在 pandas 中进行分组抽样
- javascript - 使用 Mutation Observer 检测 dom 元素样式变化