当前位置：首页 > React

react前端实现强制阅读

2026-01-27 12:14:54React

强制阅读功能的实现思路

强制阅读功能通常用于确保用户阅读完特定内容（如协议、公告等）后才能进行下一步操作。以下是几种常见的实现方式：

滚动检测法

通过监听滚动事件判断用户是否阅读到底部：

const [isReadComplete, setIsReadComplete] = useState(false);

useEffect(() => {
  const handleScroll = () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight - 10) {
      setIsReadComplete(true);
    }
  };

  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

在渲染中绑定状态：

react前端实现强制阅读

<div className="content-container" style={{height: '400px', overflow: 'auto'}}>
  {/* 长文本内容 */}
</div>
<button disabled={!isReadComplete}>同意协议</button>

倒计时强制法

设置必须等待的阅读时间：

const [timeLeft, setTimeLeft] = useState(30); // 30秒倒计时

useEffect(() => {
  const timer = timeLeft > 0 && setInterval(() => {
    setTimeLeft(timeLeft - 1);
  }, 1000);
  return () => clearInterval(timer);
}, [timeLeft]);

界面显示：

react前端实现强制阅读

<button disabled={timeLeft > 0}>
  {timeLeft > 0 ? `请阅读协议（${timeLeft}s）` : '同意协议'}
</button>

分段确认法

对长文本分段落要求确认：

const sections = [/* 分段内容 */];
const [confirmedSections, setConfirmedSections] = useState([]);

const toggleConfirm = (index) => {
  if (confirmedSections.includes(index)) {
    setConfirmedSections(confirmedSections.filter(i => i !== index));
  } else {
    setConfirmedSections([...confirmedSections, index]);
  }
};

渲染分段确认框：

{sections.map((section, index) => (
  <div key={index}>
    <p>{section}</p>
    <label>
      <input 
        type="checkbox" 
        checked={confirmedSections.includes(index)}
        onChange={() => toggleConfirm(index)}
      />
      已阅读本段
    </label>
  </div>
))}