代码之家 › 专栏 › 技术社区 › Minchan Jung

当React中的文本内容更改时,如何更新div

jsx reactjs javascript

Minchan Jung · 技术社区 · 2 年前

我正在创建wheres waldo web应用程序。在创建计时器时,我已经能够让计时器处理useRef中的数据,但我不知道如何在每次计时器更改时更新div。非常感谢您的帮助。

Javascript:

    const hour = useRef('00');
    const second = useRef('00');
    const stopTime = useRef(false);


    const timerCycle = () => {
        if (stopTime.current === false) {
            second.current = parseInt(second.current);
            minute.current = parseInt(minute.current);
            hour.current = parseInt(hour.current)

        
            second.current = second.current + 1;
        
            if (second.current === 60) {
                minute.current = minute.current + 1;
                second.current = 0;
            }
            if (minute === 60) {
                hour.current = hour.current + 1;
                minute.current = 0;
                second.current = 0;
            }
        
            if (second.current < 10 || second.current === 0) {
                second.current = '0' + second.current;
            }
            if (minute.current < 10 || minute.current === 0) {
                minute.current = '0' + minute.current;
            }
            if (hour.current < 10 || hour.current === 0) {
                hour.current = '0' + hour.current;
            }
        
            console.log(second.current, minute.current, hour.current);

            setTimeout(timerCycle, 1000);
            
        }
    }

<div id="stopwatch">{hour.current}:{minute.current}:{second.current}</div>

1 回复 | 直到 2 年前

Konrad 2 年前

我们可以看看不同的库是如何做到这一点的:

react-use

import { useReducer } from 'react';

const updateReducer = (num) => (num + 1) % 1_000_000;

export default function useUpdate() {
  const [, update] = useReducer(updateReducer, 0);

  return update;
}

const update = useUpdate();

if (hour.current < 10 || hour.current === 0) {
  hour.current = '0' + hour.current;
  update()
}

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

1 年前

Anaya Ammar · 渲染后未显示的值

1 年前

matin kahrizi · 当我的状态更改时,useSelector不更新

1 年前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Zemelon · -moz背面可见性不适用于顺风css

1 年前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

1 年前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

1 年前

Mark C. · 制作一个可松开的单选按钮[关闭]

1 年前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

1 年前