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

Posted 2023-03-04

【中文标题】单击下一步按钮如何更改图像

【英文标题】：How to change image on click of next button

【发布时间】：2022-01-05 01:34:27

【问题描述】：

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

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案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

【讨论】：

不尝试创建轮播。只想显示图片。 Onclicking 下一个按钮图像应与索引值一起显示

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。