38 lines
941 B
JavaScript
38 lines
941 B
JavaScript
function FormattedDate(props) {
|
||
return <div style={{color:"#FFFFFF"}}><div>当前：{props.date.toLocaleDateString()}</div>
|
||
<div>{props.date.toLocaleTimeString()}</div>
|
||
</div>;
|
||
}
|
||
|
||
export default class Datetime extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = { date: new Date() };
|
||
}
|
||
|
||
// 组件挂载完成之后启动定时器
|
||
componentDidMount() {
|
||
this.timeID = setInterval(() => this.tick(), 1000);
|
||
}
|
||
// 组件卸载之前清除定时器
|
||
//（注：这是我们用这个钩子函数经常做的一件事）
|
||
componentWillUnmount() {
|
||
clearInterval(this.timeID);
|
||
}
|
||
|
||
// 定义一个tick方法，专门用于调用setState方法修改date
|
||
tick() {
|
||
this.setState({
|
||
date: new Date(),
|
||
});
|
||
}
|
||
|
||
render() {
|
||
const { className }=this.props;
|
||
return (
|
||
<div className={className}>
|
||
<FormattedDate date={this.state.date} />
|
||
</div>
|
||
);
|
||
}
|
||
} |