React按钮组件单选样式问题：点击新按钮恢复旧按钮原样式

问题根源是每个Button组件单独维护自己的激活状态，彼此互不影响，所以点击新按钮时旧按钮无法自动恢复白色背景。把激活状态提升到父组件Category统一管理就能解决，具体修改如下：

修改Category组件 #

在Category里添加状态记录当前选中的分类ID，给每个Button传递激活状态和点击回调：

import React, { useState } from "react";
import Button from "./Button";

const categoryArray = [
    { id:1, category:"Starter" },
    { id:2, category:"Cold Beverages" },
    { id:3, category:"Hot Beverages" },
    { id:4, category:"South Indian" },
    { id:5, category:"Starter" },
    { id:6, category:"Cold Beverages" },
    { id:7, category:"Hot Beverages" },
    { id:8, category:"South Indian" },
    { id:9, category:"Italian" }
]

export default function Category(){
    // 记录当前选中的分类ID，初始值设为null表示没有选中
    const [selectedCategoryId, setSelectedCategoryId] = useState(null);

    // 处理按钮点击，更新选中的ID
    const handleButtonClick = (id) => {
        setSelectedCategoryId(id);
    }

    return (
        <div className="category-tray">
        {categoryArray.map((categoryTerm) => (
            <Button 
                key={categoryTerm.id} 
                name={categoryTerm.category}
                // 传递当前按钮是否激活的状态
                isActive={selectedCategoryId === categoryTerm.id}
                // 传递点击回调，把当前按钮ID传回去
                onClick={() => handleButtonClick(categoryTerm.id)}
            />
        ))}
        </div>
    );
}

修改Button组件 #

去掉自己的state，改用父组件传递的props来控制样式和点击事件：

import React from "react";

export default function Button(props){
    return <button 
        className="button" 
        style={{backgroundColor: props.isActive ? "#FD5D5D" : "white"}} 
        onClick={props.onClick}
    >{props.name}</button>
}

这样修改后，每次点击按钮时，父组件会更新选中的ID，所有按钮会根据自己的ID和选中ID是否匹配来决定背景色，实现点击新按钮时旧按钮自动恢复白色的效果。

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