React 30 秒速学:制作倒计时组件

栏目: 服务器 · 发布时间: 5年前

内容简介:本文译自:渲染倒数计时器,在达到零时打印消息。

本文译自: 30-seconds-of-react 。React 30 秒速学:全篇中文翻译、学习,地址: 30-seconds-of-react-zh_CN-umi ,所有案例进行分析、注释、上线。

渲染倒数计时器,在达到零时打印消息。

  • 使用对象解构来设置 hoursminutesseconds prop 的默认值。
  • 使用 React.useState() 钩子来创建 timepausedover 状态变量,并将它们的值分别设置为传递的props, falsefalse 的值。
  • 创建一个方法 tick ,它根据当前值更新 time 的值(即将时间减少一秒)。
  • 如果 pausedovertruetick 将立即返回。
  • 创建一个方法 reset ,将所有状态变量重置为其初始状态。
  • 使用 React.useEffect() 钩子通过使用 setInterval() 每秒调用 tick 方法,并在卸载组件时使用 clearInterval() 进行清理。
  • 使用 <div>time 状态变量的文本表示形式包装 <p> 元素,以及分别暂停/取消暂停和重启计时器的两个 <button> 元素。
  • 如果 overtrue ,计时器将显示一条消息,而不是 time 的值。
import React from "react";
function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
  const [paused, setPaused] = React.useState(false);
  const [over, setOver] = React.useState(false);
  // time 默认值是一个 object
  const [time, setTime] = React.useState({
    hours: parseInt(hours),
    minutes: parseInt(minutes),
    seconds: parseInt(seconds)
  });

  const tick = () => {
    // 暂停,或已结束
    if (paused || over) return;
    if (time.hours === 0 && time.minutes === 0 && time.seconds === 0)
      setOver(true);
    else if (time.minutes === 0 && time.seconds === 0)
      setTime({
        hours: time.hours - 1,
        minutes: 59,
        seconds: 59
      });
    else if (time.seconds === 0)
      setTime({
        hours: time.hours,
        minutes: time.minutes - 1,
        seconds: 59
      });
    else
      setTime({
        hours: time.hours,
        minutes: time.minutes,
        seconds: time.seconds - 1
      });
  };

  // 重置
  const reset = () => {
    setTime({
      hours: parseInt(hours),
      minutes: parseInt(minutes),
      seconds: parseInt(seconds)
    });
    setPaused(false);
    setOver(false);
  };

  React.useEffect(() => {
    // 执行定时
    let timerID = setInterval(() => tick(), 1000);
    // 卸载组件时进行清理
    return () => clearInterval(timerID);
  });

  return (
    <div>
      <p>{`${time.hours
        .toString()
        .padStart(2, "0")}:${time.minutes
        .toString()
        .padStart(2, "0")}:${time.seconds.toString().padStart(2, "0")}`}</p>
      <div>{over ? "Time's up!" : ""}</div>
      <button onClick={() => setPaused(!paused)}>
        {paused ? "Resume" : "Pause"}
      </button>
      <button onClick={() => reset()}>Restart</button>
    </div>
  );
}
复制代码
例子
export default function() {
  return <CountDown hours="1" minutes="45" />;
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Google御用網頁語言Node.js

Google御用網頁語言Node.js

郭家寶 / 佳魁資訊 / 2013-4-26 / NT 490

這是一本 Node.js 的入門教學,寫給想要學習 Node.js,但沒有任何系統的經驗的開發者。如果你聽說過 Node.js,並被它許多神奇的特性吸引,本書就是為你準備的。 透過閱讀本書,你可以對 Node.js 有全面的認識,學會如何用 Node.js 程式設計,了解事件驅動、非同步式 I/O 的程式設計模式,同時還可以了解一些使用JavaScript 進行函數式程式設計的方法。 ......一起来看看 《Google御用網頁語言Node.js》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具