单击下一步按钮如何更改图像

Question

在 react js 中如何编写代码：需要创建 2 个按钮下一个和上一个。当我打开浏览器时，应该显示第一个图像。单击下一个按钮时，下一张图片应与索引值一起显示。第一张图片的索引值应该是 1，第二次点击第二张图片应该显示索引值 2。第三次点击第三张图片应该显示索引值 3。点击下一个按钮图片应该改变。

Answer 1

我为你做了一个沙盒https://codesandbox.io/s/prev-next-image-wgbvx?file=/src/App.js:0-2327

从这个问题修改：Change image onClick in React Js

代码如下：

import React, { useState } from "react";
import "./styles.css";

const data = [
  {
    id: "1",
    key: "1",
    img: "1.jpg"
  },
  {
    id: "2",
    key: "2",
    img: "2.jpg"
  },
  {
    id: "3",
    img: "3.jpg"
  },
  {
    id: "4",
    img: "4.jpg"
  }
];

export default function App() {
  const [toggle, setToggle] = useState();
  const [visible, setVisible] = useState(true);

  return (
    <div className="App">
      <div className="buttons">
        <button
          onClick={() => {
            console.log(toggle);
            if (isNaN(toggle)) {
              prevImage = data.length;
            } else {
              var prevImage = toggle - 1;
              if (prevImage <= 0) {
                prevImage = data.length;
              }
            }
            setToggle(String(prevImage));
            setVisible(false);
          }}
        >
          Previous image
        </button>
        <button
          onClick={() => {
            console.log(toggle);
            if (isNaN(toggle)) {
              nextImage = 1;
            } else {
              var nextImage = parseInt(toggle) + 1;
              if (nextImage >= data.length) {
                nextImage = 1;
              }
            }
            setToggle(String(nextImage));
            setVisible(false);
          }}
        >
          Next image
        </button>
      </div>

      {data.map(({ id, img }) => {
        return (
          <>
            <div className="main">
              <div className="text">
                <h1
                  onClick={() => {
                    setToggle(id);
                    //setVisible(false);
                  }}
                >
                  {id}{" "}
                </h1>
                {toggle === id ? (
                  <>
                    <p>{id}</p>
                  </>
                ) : null}
              </div>
              <div className="img">
                {visible && id === "1" ? (
                  <img src={img} key={id} className="photo" />
                ) : null}
                {toggle === id ? (
                  <>
                    <img src={img} key={id} className="photo" />
                  </>
                ) : null}
              </div>
            </div>
          </>
        );
      })}
    </div>
  );
}

听起来您正在尝试构建一个轮播？

这是responsive React carousel。

还有一个：Pure React carousel