如何检测用户是否点击了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&nbsp; afterChange={(previousSlide, { currentSlide, onMove }) => {&nbsp; &nbsp; doSpeicalThing();&nbsp; }}&nbsp; beforeChange={(nextSlide, { currentSlide, onMove }) => {&nbsp; &nbsp; doSpeicalThing();&nbsp; }}/>

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>  );}