React 点击按钮时如何在控制台输出对应按钮的value值

原代码存在的核心问题 #

• 事件绑定逻辑错误：写法onClick = {this.click()} 会在组件每次渲染时直接执行click函数，不会等待用户点击触发事件，属于典型的React事件绑定写法错误
• 作用域变量缺失：click方法内直接打印button.value，属于从原生JS思路迁移过来的常见误区——React组件作用域下不存在名为button的全局DOM变量，执行时会直接抛出button is not defined的引用错误，根本无法获取按钮值
• 组件拆分存在认知偏差：不需要为了实现按钮取值专门创建独立Button类，当前阶段通过内置事件机制就能完成取值，提前拆组件属于过度设计

正确实现方案 #

React绑定的事件处理函数，会默认接收一个合成事件对象作为入参，通过这个对象可以直接访问到绑定事件的DOM元素，不需要在外部手动定义DOM变量：

1. 给事件处理函数增加事件入参，通过currentTarget属性获取按钮元素，读取其value值
2. 给onClick属性传递函数引用，不要加括号触发函数立即执行

修复后可正常运行的完整代码 #

import React, {Component} from 'react';
import './css/style.css'

class Calculator extends React.Component {
    constructor(props){
        super(props);
    }  
    
    // 接收合成事件对象作为默认入参
    click = (e) => {
        // currentTarget固定指向绑定事件的DOM元素，避免子元素嵌套导致取值失败
        console.log(e.currentTarget.value)
    }
    render(){
        return(
            <div>
                {/* 传递函数本身的引用，不要加括号提前执行 */}
                <button value='1' onClick={this.click}>1</button>
            </div>
        )
    }
} 
export default Calculator

小提示：这里特意用currentTarget而非target，是因为target指向用户实际点击的最深层DOM元素，如果后续按钮内部嵌套了图标、文字span等子元素，target会拿到子节点，反而取不到按钮本身的value属性，currentTarget永远固定指向绑定了onClick事件的那个元素，取值更稳定。

后续优化的补充说明 #

当后续计算器需要添加大量功能按钮（数字键、运算符、清空键等）时，再考虑抽离通用Button组件，把按钮显示文本、绑定的value值作为组件props传入，减少重复的JSX代码即可，这一优化的核心目标是减少重复代码，不是为了实现按钮取值才必须做的步骤。

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