如何在JSX中实现点击切换图片、再次点击恢复原状的功能

你现有代码的checkboxToggle函数仅固定将图片路径设置为./images/Login/login1.png，没有状态判断逻辑，因此无法实现点击来回切换的效果。

兼容原有逻辑的修改方案 #

直接在状态更新时判断当前路径，对应切换即可：

import { useState } from 'react';

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

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

更简洁的优化方案 #

使用布尔值做状态标记，避免长字符串判断，代码可读性更高：

import { useState } from 'react';

function Login() {
  const [isChecked, setIsChecked] = useState(false);
    
  const checkboxToggle = () => {
    setIsChecked(prev => !prev);
  }

  return (
    <>
      <img
        className="loginCheckbox"
        src={isChecked ? './images/Login/login1.png' : './images/Login/login2.png'}
        alt="체크박스"
        onClick={checkboxToggle}
        style={{ cursor: 'pointer' }}
      />
    </>
  );
}

内容的提问来源于stack exchange，提问作者moolbum