如何jsx图片点击图片改变

Question

如果您点击当前图片，您将看到不同的图片，如果您再次点击，请return恢复到原来的状态...

我试了几次其他的代码，都没有用。我请求你的帮助。

function Login() {
   const [loginCheck, setloginCheck] = useState('./images/Login/login2.png');
    
   const checkboxToggle= () => {
   setloginCheck('./images/Login/login1.png');
  }

  return (
  <>
    <img
    className="loginCheckbox"
    src={loginCheck}
    alt="체크박스"
    onClick={checkboxToggle}
  />
  </>
  );
}

Answer 1

您可以将图像存储在一个数组中，并将当前显示的索引存储到一个状态中。
对于两张图片，一个布尔值就可以完成这项工作，但使用这种方法也适用于超过 2 张图片的情况：

function Login() {
  const images = ['./images/Login/login1.png', './images/Login/login2.png'];
  const [imageIndex, setImageIndex] = useState(0);

  const checkboxToggle = () => {
    setImageIndex((prevIndex) => (prevIndex + 1) % images.length);
  };

  return (
    <>
      <img
        className='loginCheckbox'
        src={images[imageIndex]}
        alt='체크박스'
        onClick={checkboxToggle}
      />
    </>
  );
}

如何jsx图片点击图片改变

How to jsx image click image change

jsx

reactjs