React点击按钮捕获name属性报错this undefined问题求助

核心问题分析 #

你遇到的this is undefined报错，根源在于：

1. logName是普通函数，直接调用时，在React严格模式下this默认指向undefined，而非按钮元素，所以this.name自然取不到值。
2. 你虽然在onClick里给logName传递了event.currentTarget.getAttribute("name")参数，但logName函数根本没接收这个参数，依然在访问this.name，相当于白传了。

另外你尝试的event.currentTarget.name其实是有效的，只是因为没正确传递给logName才没生效。

几种修复方案 #

方案一：让logName接收参数，传递事件对象中的name值

直接修改logName函数，让它接收参数并打印，同时在onClick中传递正确的name值：

export function TestButton(props){
    function logName(name) {
        console.log(name)
    }
    return(
        <button name={props.name} onClick={event => logName(event.currentTarget.name)} type='button'>{props.text}</button>
    )
}

这里event.currentTarget.name可以直接拿到按钮的name属性值，比getAttribute("name")更简洁。

方案二：直接使用组件props中的name（推荐）

既然name已经作为props传入组件，完全没必要从DOM元素中获取，直接用props.name更符合React的数据流理念，代码也更简洁：

export function TestButton(props){
    function logName() {
        console.log(props.name)
    }
    return(
        <button name={props.name} onClick={logName} type='button'>{props.text}</button>
    )
}

这种方式避免了操作DOM，性能更好，逻辑也更清晰。

方案三：修正this指向（不推荐，没必要）

如果一定要让this指向按钮元素，可以通过useRef实现，但步骤繁琐，不如前两种方案直接：

import { useRef } from 'react';

export function TestButton(props){
    const buttonRef = useRef(null);
    
    function logName() {
        console.log(buttonRef.current.name)
    }
    
    return(
        <button ref={buttonRef} name={props.name} onClick={logName} type='button'>{props.text}</button>
    )
}

这种方式需要获取DOM元素，适合特殊场景，但这里完全没必要。

总结 #

你忽略了两个关键点：普通函数直接调用时的this指向问题，以及参数传递和接收的匹配。优先选择方案二，直接使用props中的值，是最符合React开发习惯的做法。

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