当ReactJS点击开始和停止时，我有一个时钟在滴答作响

Question

我有一个自动工作的计时器。但我想给它添加新功能。当我点击它时，它应该会停止，当我第二次点击时，它会工作。我用componentWillMount创建了它。但它有一些问题我无法解决。

import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date(), status: true };
this.handleStatus = this.handleStatus.bind(this);
}
componentDidMount() {
if (this.state.status) {
const oneSecond = 1000;
this.clear = setInterval(() => {
this.setState({ date: new Date() });
}, oneSecond);
}
}
componentWillMount() {
if (!this.state.status) {
clearInterval(this.clear);
}
}
handleStatus() {
this.setState({ status: !this.state.status });
}
render() {
console.log(this.state.status);
return (
<div className="fs-5 fw-bold text-primary">
{this.state.date.toLocaleTimeString()}
<br />
<button className="btn btn-warning" onClick={this.handleStatus}>
Tikla
</button>
</div>
);
}
}
export default Clock;

Answer 1

这样试试。

componentDidMount() {
if (this.state.status) {
const oneSecond = 1000;
this.clear = setInterval(() => {
this.setState({ date: new Date() });
}, oneSecond);
}
}

handleStatus() {
if(this.state.status){
clearInterval(this.clear);
}
else{
const oneSecond = 1000;
this.clear = setInterval(() => {
this.setState({ date: new Date() });
}, oneSecond);
}
this.setState({ status: !this.state.status });
}

你可以在这里交谈。https://codesandbox.io/s/youthful-cdn-lpntx?file=/src/App.js