如何检测用户是否点击了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”的文档时，页面转换时会调用一个回调函数。

这里

<Carousel

  afterChange={(previousSlide, { currentSlide, onMove }) => {

    doSpeicalThing();

  }}

  beforeChange={(nextSlide, { currentSlide, onMove }) => {

    doSpeicalThing();

  }}

/>

Answer 2

您可以使用每次滑动之前和之后调用的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>

  );

}