React中的秒表

2023-09-16 javascript

以下示例是关于Javascript中包含React中的秒表用法的示例代码，想了解React中的秒表的具体用法？React中的秒表怎么用？React中的秒表使用的例子？那么可以参考以下相关源代码片段来学习它的具体使用方法。

[英]：stopwatch in react源码类型：Javascript

// *Stopwatch

import { useEffect, useState } from "react";

const StopwatchTry = () => {
  const [time, setTime] = useState({
    min: 0,
    sec: 0,
  });
  const [runing, setRunning] = useState(false);

  useEffect(() => {
    let interval;
    if (runing) {
      interval = setInterval(() => {
        setTime((prev) => ({
          ...prev,
          sec: prev.sec + 1,
        }));
      }, 1000);
    } else {
      clearInterval(interval);
    }
    return () => {
      clearInterval(interval);
    };
  }, [runing]);

  const start = () => {
    setRunning(true);
  };

  const stop = () => {
    setRunning(false);
  };
  const reset = () => {
    setTime({
      min: 0,
      sec: 0,
    });
  };
  return (
    <>
      <div>
        {time.min}m {time.sec}s
      </div>
      <div>
        <button onClick={start}>Start</button>
        <button onClick={stop}>Stop</button>
        <button onClick={reset}>Reset</button>
      </div>
    </>
  );
};

export default StopwatchTry;

本文地址：https://itbaoku.cn/snippets/872489.html

上一篇：JavaScript编辑模式启用了修改任何网页

下一篇：未知的错误:构造感受:syntaxerror:json中字符串字符串中的不良控制字符366

相关教程

GraphQL教程

初学者GraphQL教程 - 从基本到高级概念的简单简单步骤学习GraphQL，其中包括简介，环境设...

SAP IDT教程

SAP IDT初学者教程 - 从简单和简单的步骤学习SAP IDT，从基本到高级概念，包括基本概念和...

SAP HANA BI开发教程

适用于初学者的SAP HANA BI开发教程 - 从基本概念到高级概念，从简单而简单的步骤学习SAP...

Python并发教程

Python中的并发初学者教程 - 从简单而简单的步骤学习Python中的并发性，从基本到高级概念，...

d3.js入门教程

D3.js教程用什么d3.js，d3.js的概念，d3.js中的动画，d3.js的功能，d3.js的...

SAP APO教程

SAP APO初学者教程 - 从基本概念到高级概念，简单易学地学习SAP APO，其中包括简介，部署...

最新源代码片段分享

该网站上存在关键错误.了解有关WordPress故障排除的更多信息.

创建Symfony Project特定版本Symfony CLI

导入环境

合并排序算法

使用个人令牌的Docker登录注册表

XPath Match类

不良透明度面具

眨眼项目Arduino

错误:由于Oserror而无法安装软件包:[WinError 2]系统找不到指定的文件:'c:\\ python39 \\ scriptss \\ virtualenv.exe' - >'c:\\ python39 \\ script \ virtualenv.exe.deleteme'

找到两个字符串的常见最长子序列

在PHP，JavaScript，Laravel，Phython，Rubby，所有语言

如何在Windows 10上检查SHA256

将文件转换为JavaScript客户端的base64

从textInputeDittext中删除底线

Godot充当参数

打开新页面的颤音

注册密钥映射Fivem

Scala中的选项

JavaScript鼠标覆盖并输入

如何在Elemnet jQuery的距离距离

如何在nodehs中删除字典中的特定值

Vercel 404找不到REECT JS

JS从元素中删除所有属性

在MUI中设置订单

pdfs python中的搜索字符串

平整阵列python

从Android开始反应天然

停用大熊猫警告副本

反向登录器'group.user_set'用于'auth.user.groups'与'users.user.groups'的反向登录器发生冲突.

将列表分为N Python

热门代码标签

abap actionscript ada apache_conf applescript asciidoc asl assembly assembly_x86 autohotkey basic batchfile c c_cpp cirru clojure coffee coldfusion cpp csharp css d dart delphi diff dockerfile dot ejs elixir elm erlang excel forth fortran fsharp gdscript gitignore glsl go golang graphqlschema groovy haml handlebars haskell haxe html html_ruby ini io jade java javascript json jsoniq jsp jsx julia kotlin latex

React中的秒表

相关源代码片段分享

相关文章

相关教程