Javascript 如何使用自定义按钮控制react引导转盘？

在这里，我需要控制旋转木马幻灯片与自定义按钮，我实现了这一点的帮助下，这个

这是它的代码

import React, { useState } from "react";
import { Carousel, Button, Container, Row } from "react-bootstrap";
import Cards from "../cards";
import "./slider.css";

const Slider = () => {
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

  const onPrevClick = () => {
    if (index > 0) {
      setIndex(index - 1);
    } else if (index === 0) setIndex(2);
  };
  const onNextClick = () => {
    if (index === 2) {
      setIndex(0);
    } else if (index === 0 || index > 0) setIndex(index + 1);
  };

  return (
    <>
      <div className="button-container">
        <Container>
          <Row>
            <Button variant="primary" onClick={onPrevClick}>
              Previous
            </Button>
            <Button variant="primary" onClick={onNextClick}>
              Next
            </Button>
          </Row>
        </Container>
      </div>
      <Carousel
        activeIndex={index}
        onSelect={handleSelect}
        indicators={false}
        controls={false}
      >
        <Carousel.Item>
          <Cards />
        </Carousel.Item>
        <Carousel.Item>
          <Cards />
        </Carousel.Item>
        <Carousel.Item>
          <Cards />
        </Carousel.Item>
      </Carousel>
    </>
  );
};

export default Slider;

import React，{useState}来自“React”；
从“react bootstrap”导入{Carousel，Button，Container，Row}；
从“./Cards”导入卡片；
导入“/slider.css”；
常量滑块=（）=>{
const[index，setIndex]=useState（0）；
const handleSelect=（selectedIndex，e）=>{
设置索引（selectedIndex）；
};
const onPrevClick=（）=>{
如果（索引>0）{
setIndex（索引-1）；
}如果（索引===0）设置索引（2），则为else；
};
const onNextClick=（）=>{
如果（索引==2）{
setIndex（0）；
}否则，如果（索引===0 | |索引>0）设置索引（索引+1）；
};
返回(
以前的
下一个
);
};
导出默认滑块；

但当活动索引位于最后一项时，这意味着在最后一张旋转木马幻灯片中。当我按下“下一步”按钮时，它会从最后一个转盘一直移动到第一个转盘，即方向类似于3->2->1

我知道我在onClick函数中做了一些糟糕的逻辑。因此，我正在寻求帮助，向我建议使用自定义按钮控制旋转木马幻灯片的最佳方法，非常感谢您的帮助。请检查我的代码并告诉我任何建议。提前谢谢

---

这里是使用

ref

可以控制

prev

和

next

操作

  const ref = useRef(null);

  const onPrevClick = () => {
    ref.current.prev();
  };
  const onNextClick = () => {
    ref.current.next();
  };

JSX

  <Carousel
    ref={ref}
    ...
  >