React组件中打印e.target.value为何显示undefined？

问题原因 #

• <a>标签不属于表单控件，它本身没有标准的value属性，你手动添加的value不会被浏览器识别为元素的内置属性，自然拿不到对应值。
• 点击<a>时，e.target可能指向标签内的文本节点（比如“Home”“About”这些文字），而不是<a>标签本身，这时候e.target根本没有value属性，结果就是undefined。

解决办法 #

方法1：用自定义data属性存值，通过currentTarget获取

把value换成data-*格式的自定义属性，同时用e.currentTarget确保拿到的是绑定事件的<a>标签本身：

const NavBar = () => {
    const handleClick = (value) => {
        console.log(value)
    }
    
    return (
        <div id="navbar">
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <div className="container-fluid">
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                        <div className="navbar-nav">
                            <a className="nav-link active" aria-current="page" href="/home" onClick={(e) => handleClick(e.currentTarget.dataset.value)} data-value="home">Home</a>
                            <a className="nav-link" aria-current="page" data-value="1" onClick={(e) => handleClick(e.currentTarget.dataset.value)}>About</a>
                            <a className="nav-link" aria-current="page" data-value="2" onClick={(e) => handleClick(e.currentTarget.dataset.value)}>Contact</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    )
}

export default NavBar

方法2：直接传值给处理函数（更简单）

不用依赖事件对象，直接把需要的值作为参数传给handleClick，避免target的不确定性：

const NavBar = () => {
    const handleClick = (value) => {
        console.log(value)
    }
    
    return (
        <div id="navbar">
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <div className="container-fluid">
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                        <div className="navbar-nav">
                            <a className="nav-link active" aria-current="page" href="/home" onClick={() => handleClick('home')}>Home</a>
                            <a className="nav-link" aria-current="page" onClick={() => handleClick(1)}>About</a>
                            <a className="nav-link" aria-current="page" onClick={() => handleClick(2)}>Contact</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    )
}

export default NavBar

另外提一句：React里元素的class属性要换成className，不然会和JS的关键字冲突，虽然不影响功能，但不符合React规范。

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