Reactstrap问题：NavLink的value属性值偶尔获取为null

问题根源 #

你遇到的随机获取到null的情况，本质是事件触发目标的不确定性：

• 你的NavLink内部嵌套了<i>图标元素，当点击标签页时，如果点击的是图标区域，e.target指向的是<i>标签而非外层的NavLink；
• <i>标签没有设置value属性，所以调用getAttribute("value")自然返回null；
• 点击到NavLink的空白区域时，e.target才是NavLink，能正确获取到value，这就是问题随机出现的原因。

三种可行解决方案 #

方案1：使用e.currentTarget替代e.target

currentTarget始终指向绑定事件的元素（也就是NavLink），不管点击的是它本身还是子元素：

onTabSelected(e) {
  e.preventDefault();
  // 改用currentTarget获取绑定事件的NavLink元素
  const tab_name = e.currentTarget.getAttribute("value");
  console.log("tab_name", tab_name);
}

方案2：直接传递tab_name参数（更符合React思想）

不需要从DOM读取属性，直接在渲染时把tab_name作为参数传给事件处理函数，避免依赖DOM：

// 修改事件处理函数，直接接收tab_name参数
onTabSelected(tab_name, e) {
  e.preventDefault();
  console.log("tab_name", tab_name);
}

// 渲染NavLink时，传递参数
<NavLink
  value={tab_name}
  onClick={(e) => this.onTabSelected(tab_name, e)}
  className={tab_to_display == tab_name ? "active" : ""}
>
  <i className={icon} />
</NavLink>

方案3：阻止子元素的点击事件穿透

给<i>标签添加CSS样式，让点击事件直接冒泡到父元素NavLink：

.nav-link i {
  pointer-events: none;
}

这样无论点击图标还是空白区域，e.target都会指向NavLink。

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