React按钮onClick如何同时更新选中状态并向父组件传值？

你现在的代码有三个核心错误，导致两个逻辑无法同时触发：

• 把选中态、未选中态的按钮拆成了两个独立DOM节点，渲染选中样式的按钮根本没绑定onClick事件，点击无响应
• 子组件写的changeLevel方法取值错误，levelFilter是父组件传入的函数，不存在value属性，正确的取值来源是点击事件对象的target.value
• 点击事件只绑定了父组件传入的过滤函数，子组件自身的状态更新逻辑从未被触发，自然无法维持选中样式

不需要拆分两个按钮做三元渲染，直接给单个按钮动态绑定样式、统一在点击回调里执行两个逻辑即可。

修正后的子组件代码 #

export default function ProjectLibraryFilterButtons({ levelFilter }) {
    const [filterLevel, setFilterLevel] = useState("");
    const activeBtnStyle = {
        backgroundColor: "rgb(0, 106, 245)",
        color: "white",
    };

    // 统一处理点击逻辑
    const handleLevelClick = (e) => {
        const selectedLevel = e.target.value;
        // 更新子组件本地状态，控制按钮选中样式
        setFilterLevel(selectedLevel);
        // 调用父组件传入的过滤方法，触发父组件内容筛选
        levelFilter(e);
    };

    return (
        <div className="pl-btn-container">
            <div className="pl-left-btn">
                <button
                    value="BEGINNER"
                    style={filterLevel === "BEGINNER" ? activeBtnStyle : {}}
                    onClick={handleLevelClick}
                    className="pl-filter-btn first-pl"
                >
                    BEGINNER
                </button>
                <button
                    value="INTERMEDIATE"
                    style={filterLevel === "INTERMEDIATE" ? activeBtnStyle : {}}
                    onClick={handleLevelClick}
                    className="pl-filter-btn"
                >
                    INTERMEDIATE
                </button>
                <button
                    value="ADVANCED"
                    style={filterLevel === "ADVANCED" ? activeBtnStyle : {}}
                    onClick={handleLevelClick}
                    className="pl-filter-btn"
                >
                    ADVANCED
                </button>
            </div>
        </div>
    );
}

父组件说明 #

你原来写的父组件逻辑不需要改动，可以正常工作。

• 不要为了样式差异拆分重复的DOM节点，直接根据状态动态绑定style或者className即可，能少写大量重复代码，后续维护更简单
• React的事件回调里可以按顺序执行任意多个同步逻辑，不需要拆分多个事件绑定，把更新自身状态、调用父组件传参的逻辑都放在同一个点击处理函数里就行
• 注意区分props传入值的类型，不要从函数类型的props上读取DOM属性，按钮的value永远要从点击事件对象e.target上获取

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