Как настроить переключение слайдов React JS?

Question

[start21]

Здравствуйте , есть компонент Slider , в него приходят index картинки , по которой кликнули, но я не могу настроить в слайдере переключение на кнопках (вперед-назад).

mport React, { useState, useEffect } from "react";
import Carousel from "react-bootstrap/Carousel";

export const Slider = ({ photo, indexSlide }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const next = document.getElementsByClassName("carousel-control-next")[0];
    const prev = document.getElementsByClassName("carousel-control-prev")[0];
    next.addEventListener("click", () => {
      return setCount(count + 1)
    });
  }, []);

  return (
    <Carousel fade variant="dark" activeIndex={indexSlide}>
      {photo.data?.photoAlbum.map((res) => (
        <Carousel.Item>
          <img className="d-block w-100" src={res.photo} alt="slide" />
        </Carousel.Item>
      ))}
    </Carousel>
  );
};

В консоль выводил state , там просто 0 и он не изменяться, 0 выводиться 2 раза.

Comments

[szQocks]

а что в документации сказано что нужно обработчики вешать ещё и таким способом ?

[szQocks]

carousel

Answer 1

[omyraucy]

Если вы пользуетесь React, то забудьте про document.getElement или querySelector со всеми вытекающими. У React для этого реализован свой функционал. Почитайте про useRef в официальной документации.
Также, здесь не требуется useEffect.

import React { useState } from "react"

const Slider = ({ photo }) => {
    const [count, setCount] = useState(0)

    const next = () => {
        if (count === photo.data.photoAlbum.length - 1) { setCount(0) }
        else { setCount(count + 1) }
    }

    const prev = () => {
        if (count === 0) { setCount(photo.data.photoAlbum.length - 1) }
        else { setCount(0) }
    }

    return (
        <Carousel fade variant="dark" activeIndex={index}>
            <button onClick={prev}>Prev</button>
            <button onClick={next}>Next</button>
            { photo.data?.photoAlbum.map((res, index) => (
                { count === index && <Carousel.Item>
                    <img className="d-block w-100" src={res.photo} alt="slide" />
                </Carousel.Item>}
            )) }
        </Carousel>
    )
}

export default Slider

Попробуй так.