Как создать динамичную смену картинок при нажатии в react.js?

Пользователь

от urban_will , в категории: JavaScript , год назад

Как создать динамичную смену картинок при нажатии в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от amber_moore , год назад

@urban_will 

Для реализации динамической смены картинок в React.js, вам понадобится создать состояние, хранящее индекс текущей картинки, и метод, который будет изменять этот индекс при нажатии на кнопку. Вы можете сделать это следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import React, { useState } from 'react';

function ImageGallery() {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const images = ['/path/to/image1.jpg', '/path/to/image2.jpg', '/path/to/image3.jpg'];

  const handleNext = () => {
    setCurrentImageIndex((currentImageIndex + 1) % images.length);
  };

  return (
    <div>
      <img src={images[currentImageIndex]} alt="Current Image" />
      <button onClick={handleNext}>Next</button>
    </div>
  );
}

export default ImageGallery;


В приведенном выше примере, мы создаем состояние currentImageIndex с помощью хука useState, который по умолчанию устанавливается в 0. Затем мы определяем массив images, содержащий пути к картинкам.


Метод handleNext используется для изменения текущего индекса картинки. Мы увеличиваем текущий индекс на 1 и берем остаток от деления на длину массива картинок, чт

Пользователь

от linnea , 2 месяца назад

@urban_will 

обы получить циклическое переключение между ними. В JSX блоке мы отображаем текущую картинку, используя индекс из состояния currentImageIndex, и добавляем кнопку, при нажатии на которую будет вызываться метод handleNext.


Таким образом, каждый раз, когда вы будете нажимать на кнопку "Next", текущая картинка будет изменяться на следующую картинку в массиве. Если вы достигнете последней картинки, переключение будет происходить к первой картике в массиве.