React 实现计时器

最新推荐文章于 2024-06-25 11:59:53 发布

LanM蓝莓

最新推荐文章于 2024-06-25 11:59:53 发布

阅读量863

点赞数 1

分类专栏： JS 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/blueskywang66/article/details/127382130

版权

JS 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

这篇博客展示了如何利用React和Material-UI库创建一个简单的计时器组件。通过`useState`和`useRef`钩子管理状态，实现了开始和停止计时的功能，并实时显示已过去的时间。组件中还包含了Button、Box和Divider等Material-UI组件的应用。

摘要由CSDN通过智能技术生成

此处我主要用了Material-UI组件库

安装

yarn add @mui/material @emotion/react @emotion/styled

实现

import React, { useRef } from "react"
import Button from "@mui/material/Button"
import Box from "@mui/material/Box"
import Divider from "@mui/material/Divider"
import Chip from "@mui/material/Chip"

export default function Time() {
	const [startTime, setStartTime] = useState(null)
	const [now, setNow] = useState(null)
	const refs = useRef(null)
	var secondsPassed = 0
	if (startTime != null && now != null) {
		secondsPassed = (now - startTime) / 1000
	}

	function handleStart() {
		setStartTime(Date.now())
		setNow(Date.now())
		clearInterval(refs.current)
		refs.current = setInterval(() => {
			setNow(Date.now())
		}, 10)
	}

	function handleStop() {
		clearInterval(refs.current)
	}

	return (
		<div>
			<Divider>
				<Chip label="useRef" />
			</Divider>
			<Box sx={{ width: "500px", marginTop: "10px", marginBottom: "10px" }}>
				<h1>Time:{secondsPassed.toFixed(3)}</h1>
				<Button variant="outlined" color="success" onClick={handleStart}>
					start
				</Button>
				<Button variant="outlined" color="error" onClick={handleStop}>
					stop
				</Button>
			</Box>
		</div>
	)
}