React新手求助：点击图片实现ADD与ADDED图片切换的方法

你已经导入了useState但还没用到，这是实现图片切换的核心。直接修改代码即可，具体步骤如下：

1. 在组件内部初始化状态，记录当前是否为“已添加”状态：

const [isAdded, setIsAdded] = useState(false);

2. 编写切换状态的函数：

const toggleImage = () => {
  setIsAdded(prev => !prev);
};

3. 修改img标签的src和onClick属性，根据状态切换显示的图片：

<img id='imageid' src={isAdded ? added : add} alt='切换图标' onClick={toggleImage}/>

完整修改后的代码：

import React, { useState } from 'react';
import NavBar from "../../components/navBar/navbar";
import "./profile.scss"
import add from './Images/add.png'
import added from './Images/added.png'

const Profile = () => {
    // 初始化状态，false表示默认显示add图
    const [isAdded, setIsAdded] = useState(false);

    // 点击时切换状态
    const toggleImage = () => {
        setIsAdded(prevState => !prevState);
    };

    return (
        <div className="navbar-display">
            <NavBar/>
            <div className="right" >
                {/* 根据isAdded状态切换图片，绑定点击事件 */}
                <img id='imageid' src={isAdded ? added : add} alt='切换图标' onClick={toggleImage}/>
            </div>
        </div>
    )
}

export default Profile;

几个关键注意点：

• onClick不要加引号，加引号会把它变成字符串，而不是引用函数，这是你之前可能报错的原因之一。
• 用三元表达式isAdded ? added : add根据状态动态选择图片资源。
• setIsAdded(prev => !prev)通过前一次状态取反，保证状态切换的准确性。

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