react-hooks - 想要暂停自动播放轮播？

Question

在反应钩子中为图像轮播编写了代码。计划在不使用库的情况下实现轮播。我已经成功实现了左箭头、右箭头和自动播放。但是当我单击图像上的轮播幻灯片时，我不知道如何暂停自动播放。在下面包含了我的代码。你能指导我这样做吗？这是我的代码。

 import React, { useEffect, useState, useRef } from "react";
 import { departmentSlides } from "../../../components/common/Constants";
function Department() {
  let [currentPosition, setCurrentPosition] = useState(0); 
  let departmentSlide = departmentSlides[currentPosition]; 
  useEffect(() => {
    const interval = setInterval(() => {
      currentPosition !== departmentSlides.length - 1 // Check index length
        ? setCurrentPosition(currentPosition + 1)
        : setCurrentPosition((currentPosition = 0));
    }, 12000);
    return () => clearTimeout(interval);
  });

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

  const goLeft = () => {
    currentPosition !== 0 // Check index length
      ? setCurrentPosition(currentPosition - 1)
      : setCurrentPosition((currentPosition = departmentSlides.length - 1));
  };

  return (
    <div className="container-fluid">
      {/* <div className="carousel"> */}
      <div className="row">
        <div className="col-lg-12">
          <img
            src={departmentSlide.src}
            className="img-responsive department-img"
            alt="images"
          />
          <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;

标签： react-hooks