React状态向上传递时，按钮点击e.target.value为undefined问题求助

你遇到的问题是因为按钮内部包含了<HomeIcon>、<span>等子元素，当点击按钮时，e.target实际指向的是你点击到的具体子元素（比如图标或文字），而这些子元素并没有value属性，所以会返回undefined。

方案一：改用e.currentTarget获取值 #

currentTarget始终指向绑定了事件处理函数的元素（也就是外层的<button>），不管点击的是它的哪个子元素，都能正确获取按钮的value值。修改Navbar组件的handlePageChange函数：

handlePageChange(e) {
  const pageValue = e.currentTarget.value;
  this.props.handlePageChange(pageValue);
  console.log(pageValue); // 现在能正确获取到对应页面值
}

方案二：直接在点击事件中传递目标值 #

这种方式不需要依赖事件对象，逻辑更直观，也彻底避免了事件冒泡导致的target指向问题。修改按钮的onClick绑定：

<button onClick={() => this.handlePageChange("Overview")}>
  <HomeIcon style={{ fill: "#5c66bd" }} />
  <span>Overview</span>
</button>

同时更新handlePageChange函数，直接接收页面值而非事件对象：

handlePageChange(pageValue) {
  this.props.handlePageChange(pageValue);
  console.log(pageValue);
}

方案三：通过CSS阻止子元素响应点击事件 #

给按钮内的所有子元素添加pointer-events: none样式，让点击事件直接穿透到按钮本身，这样e.target就会始终指向按钮。在对应CSS文件中添加：

.nav-boxes button > * {
  pointer-events: none;
}

这种方式不需要修改JavaScript代码，适合不想改动现有逻辑的场景。

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