React Slick：滑动事件触发时如何获取轮播图当前索引

React Slick的onSwipe事件仅能返回滑动方向（left/right），要获取轮播的当前索引，你需要使用组件提供的onAfterChange或onBeforeChange事件，这两个事件会直接返回索引值。

修改步骤： #

1. 替换事件监听：将onSwipe替换为onAfterChange，该事件在轮播切换完成后触发，参数为当前激活的轮播索引。
2. 移除无效逻辑：删除你之前监听sliderRef的useEffect，因为sliderRef.current是Slider组件的实例对象，并非索引值，这段逻辑完全无效。
3. 保持状态同步：保留手动按钮点击触发setSlide的逻辑，同时通过onAfterChange确保滑动操作时状态能同步更新。

修改后的完整代码： #

export function PromotionalCarousel({
    infinite = false,
    speed = 500,
    slidesToShow,
    slidesToScroll,
    children,
    showArrows = true,
    dots = false
}: PropTypes) {
    const sliderRef = useRef(null);
    const [slide, setSlide] = useState(0)

    const changeSlide = (index: number) => {
        sliderRef.current?.slickGoTo(index);
    };

    useEffect(() => {
        changeSlide(slide)
    }, [slide])
    
    return (
        <div className={styles['main-area']}>
            <section className={styles['slide-container']}>
                <Slider
                    ref={sliderRef}
                    dots={dots}
                    infinite={infinite}
                    speed={speed}
                    slidesToShow={slidesToShow}
                    slidesToScroll={slidesToScroll}
                    className={styles.slider}
                    arrows={showArrows}
                    // 替换onSwipe为onAfterChange，获取当前索引
                    onAfterChange={(currentIndex) => setSlide(currentIndex)}
                >
                    {children.map((element, i) => {
                        return (
                            <div key={i} className={styles.image}>
                                {element}
                            </div>
                        );
                    })}
                </Slider>
            </section>
            <div className={styles['buttons-area']}>
                    <button 
                        type='button' 
                        className={styles['button-carousel']}
                        style={{
                            backgroundColor: slide === 0 ? '#fa6c00' : '#8A9197', 
                            opacity: slide === 0 ? '1' : '.3'
                        }}
                        onClick={() => setSlide(0)}
                    />
                    <button 
                        type='button' 
                        className={styles['button-carousel']}
                        style={{
                            backgroundColor: slide === 1 ? '#fa6c00' : '#8A9197',
                            opacity: slide === 1 ? '1' : '.3'
                        }}
                        onClick={() => setSlide(1)}
                    />
                    <button 
                        type='button' 
                        className={styles['button-carousel']}
                        style={{
                            backgroundColor: slide === 2 ? '#fa6c00' : '#8A9197', 
                            opacity: slide === 2 ? '1' : '.3'
                        }} 
                        onClick={() => setSlide(2)}
                    />
            </div>
        </div>
    );
}

补充说明： #

• 若需要在轮播切换开始时获取索引，可使用onBeforeChange，它的参数为currentIndex（当前索引）和nextIndex（目标索引）。
• 给sliderRef.current?.slickGoTo(index)添加可选链操作符，避免组件未挂载时调用方法报错。

内容的提问来源于stack exchange，提问作者Lucas Alvares