当前位置：首页 > React

react如何设置必须看文本几秒

2026-01-25 20:40:19React

实现文本强制阅读时间的方法

在React中实现强制用户阅读文本几秒的功能，可以通过以下几种方式实现：

使用状态和定时器控制

import React, { useState, useEffect } from 'react';

function ForcedReadComponent() {
  const [timeLeft, setTimeLeft] = useState(5); // 默认5秒
  const [canProceed, setCanProceed] = useState(false);

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(prev => {
        if (prev <= 1) {
          clearInterval(timer);
          setCanProceed(true);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      <p>请仔细阅读以下内容（剩余时间: {timeLeft}秒）</p>
      <div>这里是需要阅读的文本内容...</div>
      <button disabled={!canProceed}>继续</button>
    </div>
  );
}

结合滚动检测的进阶实现

function ScrollAwareReadComponent() {
  const [readTime, setReadTime] = useState(0);
  const [requiredTime] = useState(5);
  const [scrolledToBottom, setScrolledToBottom] = useState(false);

  useEffect(() => {
    const timer = setInterval(() => {
      if (scrolledToBottom) {
        setReadTime(prev => prev + 1);
      }
    }, 1000);

    return () => clearInterval(timer);
  }, [scrolledToBottom]);

  const handleScroll = (e) => {
    const { scrollTop, scrollHeight, clientHeight } = e.target;
    const isBottom = scrollHeight - scrollTop === clientHeight;
    setScrolledToBottom(isBottom);
  };

  return (
    <div onScroll={handleScroll} style={{ height: '200px', overflow: 'auto' }}>
      <p>请完整阅读内容（已阅读: {readTime}/{requiredTime}秒）</p>
      <div>这里是长文本内容...</div>
      <button disabled={readTime < requiredTime}>确认</button>
    </div>
  );
}

使用自定义Hook封装逻辑

function useForcedReadTime(requiredSeconds) {
  const [elapsed, setElapsed] = useState(0);
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    let interval;
    if (isActive && elapsed < requiredSeconds) {
      interval = setInterval(() => {
        setElapsed(prev => prev + 1);
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isActive, elapsed, requiredSeconds]);

  const startTimer = () => setIsActive(true);
  const resetTimer = () => {
    setElapsed(0);
    setIsActive(false);
  };

  return { elapsed, startTimer, resetTimer, isComplete: elapsed >= requiredSeconds };
}

实现注意事项

react如何设置必须看文本几秒