如何jsx图像单击图像更改答案

【问题标题】：How to jsx image click image change如何jsx图像单击图像更改
【发布时间】：2022-01-07 04:31:54
【问题描述】：

如果点击当前图片，会看到不同的图片，如果再次点击，请恢复原状...

我尝试了几次其他代码，但没有成功。我请求你的帮助。

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}
  />
  </>
  );
}

【问题讨论】：

您可以在登录中添加一个使用 setState 函数的函数。您对 checkboxToggle 有正确的想法，但它所做的只是将本地状态设置为 login1.png。出于比较原因，一个简单的 if-else 将允许您根据您想要的方式更改状态。还要检查this link，因为它显示了如何使用 DOM 执行您的请求。
感谢您的建议。我学到了很多东西。谢谢你的链接！

标签： reactjs jsx

【解决方案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}
      />
    </>
  );
}

【讨论】：

我没想过把图片放在排列中。我学到了很多东西。谢谢。