React点击单张卡片Active按钮时所有卡片均激活的问题求解

你的核心问题是用单个状态变量控制了所有卡片的样式——所有卡片共享同一个className状态，只要修改这个状态，所有卡片都会同步变化，自然全部被激活。

正确的做法是用状态记录「当前激活的卡片ID」，而非直接存类名，再让每个卡片根据自身ID是否匹配激活ID来动态生成样式类。

修改步骤 #

1. 替换状态变量：把原来的className状态改成记录激活ID的activeId，初始值设为null（表示无卡片激活）。
2. 更新激活逻辑：点击Active按钮时，切换当前激活的ID——如果点击的卡片已激活就取消（设为null），否则设置为该卡片ID。
3. 动态生成类名：每个卡片渲染时，根据自身ID是否等于activeId，决定是否添加border-info类。

修改后的完整代码 #

function GridMod({articles, updateArticleList}) {
    // 用activeId记录当前激活的卡片ID，初始无激活
    const [activeId, setActiveId] = useState(null);

    const toggleStatus = (id) => {
        // 切换激活状态：如果当前ID已激活就取消，否则激活它
        setActiveId(prevId => prevId === id ? null : id);
    };

    const Remove = async (id) => {
        try {
            await axios.delete(`http://localhost:3001/articles/${id}`);
            const updatedArticles = articles.filter((article) => article.id !== id);
            updateArticleList(updatedArticles);
            // 如果删除的是激活的卡片，同步清空激活状态
            if (activeId === id) {
                setActiveId(null);
            }
        } catch (error) {
            console.error(error);
        }
    }

    return (
        <div className='container'>
            <div className="container">
                <div className="row">
                    {articles.map((article) => (    
                        <div className="col-sm" key={article.id}>
                            {/* 动态生成类名：匹配activeId则添加border-info */}
                            <div 
                                className={`card mb-3 border-3 ${activeId === article.id ? 'border-info' : ''}`} 
                                style={{width:"18rem"}}
                            >
                                <img 
                                    className="card-img-top" 
                                    src={article.image} 
                                    alt="Card image cap"
                                    style={{height:"250px" }} 
                                />
                                <div className="card-body">
                                    <h5 className="card-title">{article.title}</h5>
                                    <p className="card-text">{article.description}</p>
                                    <Link to={`/blog/edit/${article.id}`} className='btn btn-primary'>
                                        <AiFillAlipayCircle/> Edit blog
                                    </Link>  &nbsp;&nbsp;
                                    <button onClick={() => Remove(article.id)}>Delete</button>  &nbsp;&nbsp;   
                                    <button onClick={() => toggleStatus(article.id)}>Active</button>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}
export default GridMod;

关键细节说明 #

• 状态设计：用activeId替代全局类名状态，精准控制单个卡片的激活状态，不会影响其他卡片。
• 动态类名：用模板字符串${...}拼接基础类和条件类，简洁高效。
• 删除同步：删除卡片时如果刚好是激活状态，同步清空activeId，避免状态残留。

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