时间戳

首页 > 解决方案 > slickGoTo 不会更改活动幻灯片

javascript - slickGoTo 不会更改活动幻灯片

问题描述

react-slick我在我的 React 应用程序中添加了使用滑块。因为<Slider>我添加了 ref，我正在尝试使用它来更改活动幻灯片：

import React, { useRef } from 'react';
import Slider from 'react-slick';

const TestSlider = () => {
  const handleOnClick = index => {
    sliderRef.slick('slickGoTo', index);
    // also try sliderRef.slickGoTo(index);
  };

  <Slider {...settings} ref={sliderRef}>
    ...
  </Slider>
}

但我得到一个错误：

TypeError：sliderRef.slick 不是函数

为什么这对我不起作用？

“反应”：“^16.6.3”，

“反应光滑”：“^0.27.12”，

标签： javascriptreactjsreact-hooksreact-slick

解决方案

根据 react-slick 的slickGoTo() 文档，您需要传递一个函数作为 ref。就像是：

  const handleOnClick = index => {
    this.slider.slickGoTo(index);
  };

  <Slider {...settings} ref={slider => (this.slider = slider)}>
    ...
  </Slider>

如果你想使用useRef钩子创建一个 ref，它看起来像：

  const sliderRef = useRef();

  const handleOnClick = index => {
    sliderRef.current.slickGoTo(index);
  };

  <Slider {...settings} ref={sliderRef}>
    ...
  </Slider>

推荐阅读