React自定义Button传onClick无效致useState状态不更新

问题根源是自定义Button组件没有将外部传入的onClick回调绑定到内部渲染的原生<button> DOM元素上

• 原生HTML标签的属性会自动映射到对应DOM节点，这就是为什么直接写带onClick的原生<button>元素时，点击能正常触发状态更新。
• 自定义函数组件本质是普通JS函数，给它传递的任何props都只是普通的函数入参，不会自动透传到最终渲染的DOM节点上。必须手动在组件内部把这些属性、事件绑定到底层的真实DOM元素，对应逻辑才能生效。

对照你当前的Button组件实现：
组件内部只读取了props.value用于判断类名、渲染按钮文本，完全没有处理接收到的props.onClick属性。外层传入的setCounter回调被存到组件的props对象后就被丢弃了，点击按钮时根本不会触发这个回调，自然无法更新counter的状态。

修复方案 #

1. 手动绑定事件
   在组件内部的原生<button>标签上，把接收到的onClick属性绑定上去：

import React from 'react';
import styles from './Button.module.css';
export const Button = (props) => {
    return (
        <button 
            onClick={props.onClick}
            className = {props.value === '+' ? styles.addButton : styles.subButton} 
            type = "button"
        >{props.value}</button>
    )
}

2. 全量透传的通用写法
   后续如果要给按钮加禁用态、无障碍属性、其他鼠标事件等能力，可以用扩展运算符将除单独解构的value之外的所有props直接透传，避免每次新增属性都手动补绑定逻辑：

import React from 'react';
import styles from './Button.module.css';
export const Button = ({ value, ...restProps }) => {
    const isAddButton = value === '+';
    return (
        <button 
            {...restProps}
            className = {isAddButton ? styles.addButton : styles.subButton} 
            type = "button"
        >{value}</button>
    )
}

注意细节 #

你给减号按钮传入的value是'- '（末尾带了一个空格），后续调整类名判断逻辑时，要和实际传入的字符串值完全匹配，避免出现样式不生效的次生问题。

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