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