用 e.currenttarget 替代 e.target 可稳定获取按钮元素及其自定义属性;因 svg 图标由嵌套的 组成,e.target 常指向无 value 的 ,而 e.currenttarget 始终指向绑定事件的 。
直接用 e.currenttarget 替代 e.target,就能绕开“点到 path 就拿不到按钮值”的死结。
为什么 target 会跑到 path 上?
SVG 图标(比如 react-icons 渲染的)本质是一组嵌套元素:
currentTarget 才是你真正要的“监听器所在元素”
e.currentTarget 始终指向事件监听器绑定的那个元素,不受点击位置影响。只要你在
- 获取按钮上的自定义值:e.currentTarget.value 或 e.currentTarget.dataset.id
- 读取 class 名:e.currentTarget.className
- 触发父组件方法时,传参更可靠,不用再向上遍历 parentNode
顺手加固:避免意外事件穿透
如果 SVG 图标本身也带点击行为(比如同时支持图标和按钮区域响应),可能引发重复触发或逻辑冲突。可在
- pointer-events: none(CSS)——让图标图形不拦截鼠标事件,所有点击都透传给 button
- 或在 handleRemove 开头加 if (e.target !== e.currentTarget) return;,主动过滤掉子元素触发的冒泡事件
别再依赖 event.target.value 传数据
value 属性在
- 写法:
- 读取:e.currentTarget.dataset.cid
- 优势:无歧义、支持任意字符串、React 中不会被自动转换类型











