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,


reactjs javascript react-hooks react-slick
person Jack    schedule 28.10.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Согласно документации по slickGoTo (), вам потребуется чтобы передать функцию как ссылку. Что-то типа:

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

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

Если вы хотите создать ссылку с помощью хука useRef, это будет выглядеть так:

  const sliderRef = useRef();

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

  <Slider {...settings} ref={sliderRef}>
    ...
  </Slider>
person Ed Lucas    schedule 28.10.2020