如何检测用户是否点击了 react-multi-carousel 中的箭头？

Question

如何检测用户是否点击了上一个/下一个箭头来切换 react-multi-carousel 中自动播放的值？

 return (
    <Carousel
      autoPlay={true}
      autoPlaySpeed={4500}
      customTransition="all .5"
      transitionDuration={300}
      infinite={true}
    
    >
      {movies.map((movie) => (
        <img
          key={movie.id}
          style={{ width: "100%", height: "100%" }}
          src={movie.image}
          alt={movie.title}
        />
      ))}
    </Carousel>

Answer 1

如果您对页面切换时调用的任何内容感到好奇，

当您看到“react-multi-carousel”的文档时， 页面转换时会调用回调函数。

here

<Carousel
  afterChange={(previousSlide, { currentSlide, onMove }) => {
    doSpeicalThing();
  }}
  beforeChange={(nextSlide, { currentSlide, onMove }) => {
    doSpeicalThing();
  }}
/>

Answer 2

作为Changoon Lee mentioned in their answer，您可以使用每次滑动前后都会调用的beforeChange 和afterChange 回调。

如果您只想检测按钮点击（而不是键盘滑动或拖动），您可以创建新的按钮组件并将它们作为自定义箭头传递。您的自定义按钮将收到道具/状态列表；其中之一是react-multi-carousel 的onClick 处理程序。

您可以将自定义按钮作为道具（customLeftArrow 和 customRightArrow）传递给轮播。

function CustomRightArrow({ onClick }) {
  function handleClick() {
    // do whatever you want on the right button click
    console.log('Right button clicked, go to next slide');
    // ... and don't forget to call onClick to slide
    onClick();
  }

  return (
    <button
      onClick={handleClick}
      aria-label="Go to next slide"
      className="react-multiple-carousel__arrow react-multiple-carousel__arrow--right"
    />
  );
}

function App() {
  return (
    <Carousel
      customLeftArrow={<CustomLeftArrow />}
      customRightArrow={<CustomRightArrow />}
      infinite
      keyBoardControl
    >
      {images.map((image, i) => {
        return (
          <img
            key={i}
            style={{ width: '100%', height: '100%' }}
            src={image}
            alt=""
          />
        );
      })}
    </Carousel>
  );
}