React Hooks自定义轮播如何实现点击幻灯片暂停自动播放功能

实现方案 #

需要做以下几处改动即可实现点击暂停自动播放的效果，同时修复原代码的潜在问题：

• 新增isPaused状态控制自动播放启停，初始值为false
• 新增timerRef存储定时器ID，方便全局随时清除定时器
• 修复原useEffect无依赖数组的问题，避免每次渲染重复创建定时器导致轮播速度异常
• 修复原代码中直接修改state变量的错误写法，改用useState函数式更新保证取值正确
• 给轮播图片绑定点击事件，点击时切换isPaused状态即可实现暂停/恢复自动播放，若需要点击后仅暂停一段时间自动恢复，可在点击事件中加延时逻辑

修改后完整代码 #

import React, { useEffect, useState, useRef } from "react";
import { departmentSlides } from "../../../components/common/Constants";

function Department() {
  const [currentPosition, setCurrentPosition] = useState(0); 
  // 暂停控制状态
  const [isPaused, setIsPaused] = useState(false);
  // 存储定时器ID
  const timerRef = useRef(null);
  const departmentSlide = departmentSlides[currentPosition]; 

  useEffect(() => {
    // 未暂停状态才启动自动播放
    if (!isPaused) {
      timerRef.current = setInterval(() => {
        setCurrentPosition(prev => 
          prev !== departmentSlides.length - 1 ? prev + 1 : 0
        );
      }, 12000);
    }
    // 状态变化/组件卸载时清除定时器
    return () => clearInterval(timerRef.current);
  }, [currentPosition, isPaused, departmentSlides.length]);

  const goRight = () => {
    setCurrentPosition(prev => 
      prev !== departmentSlides.length - 1 ? prev + 1 : 0
    );
  };

  const goLeft = () => {
    setCurrentPosition(prev => 
      prev !== 0 ? prev - 1 : departmentSlides.length - 1
    );
  };

  // 轮播图点击事件
  const handleSlideClick = () => {
    // 点击切换暂停/播放状态
    setIsPaused(prev => !prev);
    // 若需要点击后仅暂停30秒自动恢复，替换上面一行为以下代码即可
    // setIsPaused(true);
    // setTimeout(() => setIsPaused(false), 30000);
  };

  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-lg-12">
          {/* 绑定点击事件 */}
          <img
            src={departmentSlide.src}
            className="img-responsive department-img"
            alt="images"
            onClick={handleSlideClick}
          />
          <div className="row">
            <div className="col-lg-8 col-sm-12 col-xs-12 col-md-12 col-xl-8">
              <div className="department-content">
                <h2 className="title text-sm-12 text-md-12 text-xs-12 text-xl-12 text-lg-12">
                  {departmentSlide.title}
                </h2>
                <p className="text text-sm-12 text-md-12 text-xs-12 text-xl-12 text-lg-12">
                  {departmentSlide.text}
                </p>

                <div className="know">
                  <a
                    className="btn btn-white p-4"
                    role="button"
                    href={departmentSlide.link}
                  >
                    KNOW MORE
                  </a>
                </div>
              </div>
            </div>

            <div className="arrow d-flex">
              <button className="" onClick={goLeft} style={{ outline: "none" }}>
                <i className="fa fa-chevron-left"></i>
              </button>
              <button
                className=""
                onClick={goRight}
                style={{ outline: "none" }}
              >
                <i className="fa fa-chevron-right"></i>
              </button>
            </div>
           </div>
        </div>
      </div>
    </div>
  );
}
export default Department;

内容的提问来源于stack exchange，提问作者syashwanth