Как реализовать переключение изображений (слайдер) по клику?

Question

[Zbiten]

У меня есть массив изображений:

[
    'https://picsum.photos/500/300?image=0',
    'https://picsum.photos/500/300?image=44',
    'https://picsum.photos/500/300?image=22'
];

По клику на кнопку next, я хочу увеличить текущий индекс на +1, тем самым изменив текущую картинку.
Как это сделать? Или же для этого стоит использовать state?

import React, { Component } from 'react';

class Slider extends Component {

    render() {
        
        let currentSlideImage = 0;

        return (
            <div className="container">
                <button onClick={this.handlePrevButton}>Prev</button>
                <img src={this.props.slides[currentSlideImage]} alt="slider-item"/>
                <button onClick={this.handleNextButton}>Next</button>
            </div>
        );
    }

    handlePrevButton = () => {
        console.log('prev')
    }

    handleNextButton = () => {
        currentSlideImage++;
    }
}

export default Slider;

Answer 1

[Роман Александрович]

вы прям задались целью написать сами слайдер или просто не нашли нормальный готовый?
Ответ на ваш вопрос без разници где вы буду хранить currentSlideImage в стэйте или в сторе (если вы используете редукс). Но если вы будете использовать стейт переключение будет реализовать быстрее и думаю в этом моменте правильнее если конечно вам не важно при повторном переходе на страницу с данным слайдером показывать последний слайд на котором остановился пользователь.

import React, { Component } from 'react';

class Slider extends Component {
constructor(props){
super()
this.state=({
currentSlideImage : 0
})
}

handlePrevButton(){
        let currentSlideImage = this.state.currentSlideImage;
this.setState({
currentSlideImage:currentSlideImage-1
})
    }

    handleNextButton(){
       let currentSlideImage = this.state.currentSlideImage;
    this.setState({
    currentSlideImage:currentSlideImage+1
    })
    }

    render() {
        return (
            <div className="container">
                <button onClick={()=>this.handlePrevButton()}>Prev</button>
                <img src={this.props.slides[this.state.currentSlideImage]} alt="slider-item"/>
                <button onClick={()=>this.handleNextButton()}>Next</button>
            </div>
        );
    }
}

export default Slider;

В данном коде не хватает проверки при клике на next возможно ситуация когда количество фоток 3 а пользователь накликал 4 произойдет ошибка. Тоже самое с prev кнопкой.

Comments

[Zbiten]

то что конструктор внутри метода render, это нормально?

[Роман Александрович]

Zbiten, согласен поправил

[Zbiten]

не работает код, по клику ничего не происходит, ошибок в консоли нету

[Роман Александрович]

Zbiten, показывайте код, пропсы и стейт

[Роман Александрович]

Zbiten, onClick={()=>this.handlePrevButton()}> onClick={()=>this.handleNextButton()}

[Zbiten]

Код такой же, как в Вашем решении.
Я добавил console.log
console.log(this.state.currentSlideImage);

И при клике на next, currentSlideImage не изменяется (всегда равен 0)

===

prntscr.com/ij26qf

[Роман Александрович]

Zbiten, измените в вашем коде

onClick={()=>this.handlePrevButton()}> onClick={()=>this.handleNextButton()}

[Zbiten]

Роман Александрович, ничего не изменилось

[Роман Александрович]

Zbiten, а покажите ваш код полностью

[Zbiten]

App:

import React, { Component } from 'react';
import Slider from './Slider';
import slides from './slides';

class App extends Component {
  render() {
    return (
      <Slider slides={slides}/>
    );
  }
}

export default App;

Slider:

import React, { Component } from 'react';

class Slider extends Component {
constructor(props){
super()
this.state=({
currentSlideImage : 0
})
}
    render() {
        return (
            <div className="container">
                <button onClick={()=>this.handlePrevButton()}>Prev</button>
                <img src={this.props.slides[this.state.currentSlideImage]} alt="slider-item"/>
                <button onClick={()=>this.handleNextButton()}>Next</button>
            </div>
        );
    }

    handlePrevButton = () => {
        console.log('--')
    }

    handleNextButton = () => {
        
       let currentSlideImage = this.state.currentSlideImage;
this.setState({
currentSlideImage:currentSlideImage++
})
console.log(this.state.currentSlideImage);
console.log(this.state);
console.log(this.props);
    }

    
}

export default Slider;

slides:

export default [
    'https://picsum.photos/500/300?image=0',
    'https://picsum.photos/500/300?image=44',
    'https://picsum.photos/500/300?image=22',
    'https://picsum.photos/500/300?image=33',
    'https://picsum.photos/500/300?image=4',
    'https://picsum.photos/500/300?image=55',
    'https://picsum.photos/500/300?image=66'
];

[Роман Александрович]

Zbiten, https://codesandbox.io/s/jv84k8yr19

[Zbiten]

Роман Александрович, благодарю! а в чем была проблема? почему ++ не работает?

[Роман Александрович]

Zbiten, А черт его знает )

[Максим]

Zbiten, Роман Александрович потому что постфиксный ++ сначала возвращает переменную, а потом увеличивает на 1! Можно было использовать префиксную запись (++this.currentImageSlide)