,可以通过以下步骤实现:
isRunning
,用于表示计时器是否正在运行。在组件的构造函数中初始化该状态为true
。constructor(props) {
super(props);
this.state = {
date: new Date(),
isRunning: true
};
}
render
方法中,根据isRunning
状态来决定是否显示停止计时器的按钮。当isRunning
为true
时,显示一个按钮,点击按钮时调用stopTimer
方法。render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
{this.state.isRunning && <button onClick={this.stopTimer}>Stop Timer</button>}
</div>
);
}
stopTimer
方法,用于停止计时器。在该方法中,调用clearInterval
函数来清除计时器的定时任务,并将isRunning
状态设置为false
。stopTimer() {
clearInterval(this.timerID);
this.setState({ isRunning: false });
}
componentDidMount
中,启动计时器并将其ID保存在组件实例的属性timerID
中。这样可以在后续的操作中使用该ID来清除计时器。componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
完整的代码示例如下:
import React from 'react';
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date(),
isRunning: true
};
}
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
stopTimer() {
clearInterval(this.timerID);
this.setState({ isRunning: false });
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
{this.state.isRunning && <button onClick={this.stopTimer}>Stop Timer</button>}
</div>
);
}
}
export default Clock;
这样,当组件渲染时,会显示一个当前时间的时钟,并且在时钟下方会有一个"Stop Timer"的按钮。点击按钮后,计时器会停止,并且按钮会消失。
领取专属 10元无门槛券
手把手带您无忧上云