React中如何在事件处理器中访问子组件的props值

问题分析 #

你当前代码的核心问题：

1. handleClick里的this.props.btnText是App组件自身的props，而非对应CalcButton的btnText，根本拿不到目标值
2. 你的<button>没有设置value属性，导致e.target.value输出为空
3. e.target.getAttribute(this.props.btnText)的写法逻辑错误，getAttribute是读取DOM元素的属性，和React props无关

三种可行解决方案 #

方案1：给按钮添加value属性，通过事件对象读取

修改CalcButton组件，把btnText绑定到按钮的value属性上：

const CalcButton = (props) => {
    return (
        <button 
            id="calcBtn" 
            style={props.style} 
            onClick={props.onClick}
            value={props.btnText} // 新增这一行
        >
            {props.btnText}
        </button>
    );
};

然后修改handleClick方法，直接读取e.target.value：

handleClick(e) {
    const btnText = e.target.value;
    console.log('按钮文本:', btnText);
    this.setState((state) => ({
        currentNum: state.currentNum === '0' ? btnText : state.currentNum + btnText,
    }));
}

最后给所有需要触发点击的CalcButton绑定onClick={this.handleClick}：

<CalcButton btnText="8" onClick={this.handleClick}/>
<CalcButton btnText="9" onClick={this.handleClick}/>
// 其他按钮同理

方案2：传递onClick时直接传入btnText参数

不需要修改CalcButton，直接在父组件传递onClick时把btnText作为参数：

<CalcButton 
    btnText="7" 
    onClick={() => this.handleClick('7')}
/>
<CalcButton 
    btnText="8" 
    onClick={() => this.handleClick('8')}
/>

然后修改handleClick接收这个参数：

handleClick(btnText) {
    console.log('按钮文本:', btnText);
    this.setState((state) => ({
        currentNum: state.currentNum === '0' ? btnText : state.currentNum + btnText,
    }));
}

方案3：让子组件主动传递btnText给点击事件

修改CalcButton组件，在触发onClick时主动把btnText作为参数传递：

const CalcButton = (props) => {
    const handleBtnClick = () => {
        if (props.onClick) {
            props.onClick(props.btnText); // 把btnText传给父组件的点击事件
        }
    };
    return (
        <button 
            id="calcBtn" 
            style={props.style} 
            onClick={handleBtnClick}
        >
            {props.btnText}
        </button>
    );
};

父组件的handleClick写法和方案2一样，接收btnText参数：

handleClick(btnText) {
    console.log('按钮文本:', btnText);
    this.setState((state) => ({
        currentNum: state.currentNum === '0' ? btnText : state.currentNum + btnText,
    }));
}

然后父组件绑定onClick时直接传方法即可：

<CalcButton btnText="7" onClick={this.handleClick}/>

额外优化建议 #

• 初始currentNum是'0'，点击数字时应该替换掉初始的0（比如点击7后显示7而不是07），上面的代码已经加入了这个判断
• 给所有功能按钮（加减乘除、等于等）都绑定对应的点击事件，实现完整的计算器逻辑

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