React中如何仅更改被点击标签页图标的颜色？

你的问题出在使用了多个独立的isActive状态，点击时会同时翻转所有状态，导致多个图标变色。可以通过单个状态记录当前激活的标签来解决这个问题，代码更简洁且逻辑清晰：

import { React, useState } from "react";
import "./Footer.css";
import NightlightRoundedIcon from '@mui/icons-material/NightlightRounded';
import { IconButton } from "@mui/material";
import PersonIcon from '@mui/icons-material/Person';
import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded';
import FavoriteIcon from '@mui/icons-material/Favorite';

function Footer() {
    // 用单个状态存储当前激活的标签标识，初始激活第一个图标
    const [activeTab, setActiveTab] = useState('nightlight');

    // 统一处理点击事件，传入当前标签的标识
    const handleTabClick = (tabId) => {
        setActiveTab(tabId);
    }

    return (
        <div className="footer">
            <IconButton onClick={() => handleTabClick('nightlight')}>
                <NightlightRoundedIcon 
                    style={{ color: activeTab === 'nightlight' ? '#FF5349' : '#888' }} // 默认灰色可按需调整
                    className="titleIcon"
                    fontSize="large" 
                />
            </IconButton>
            <IconButton onClick={() => handleTabClick('favorite')}>
                <FavoriteIcon 
                    style={{ color: activeTab === 'favorite' ? '#FF5349' : '#888' }}
                    className="titleIcon"
                    fontSize="large" 
                />
            </IconButton>
            <IconButton onClick={() => handleTabClick('chat')}>
                <QuestionAnswerRoundedIcon 
                    style={{ color: activeTab === 'chat' ? '#FF5349' : '#888' }}
                    className="titleIcon"
                    fontSize="large" 
                />
            </IconButton>
            <IconButton onClick={() => handleTabClick('profile')}>
                <PersonIcon 
                    style={{ color: activeTab === 'profile' ? '#FF5349' : '#888' }}
                    className="titleIcon" 
                    fontSize="large" 
                />
            </IconButton>
        </div>
    )
}

export default Footer

关键改动说明： #

• 合并状态：把原来的三个独立isActive状态合并为一个activeTab，存储当前激活的标签ID，避免状态混乱。
• 统一点击逻辑：用单个handleTabClick函数处理所有点击，点击时直接设置activeTab为当前标签的ID，无需手动翻转其他状态。
• 精准颜色判断：每个图标通过activeTab === 自身标识判断是否激活，只有匹配的图标会显示红色，其他自动恢复灰色。
• 补全交互逻辑：给第四个PersonIcon也加上了点击事件和颜色判断，保持四个标签的交互一致性。

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