
当按钮内包含图标等子元素时,直接用 event.target.value 会因事件实际触发节点(如 标签)无 value 属性而返回 undefined;应改用 event.currenttarget.value 确保始终获取绑定事件的按钮元素的值。
在 React 中,event.target 指向事件最初发生的 DOM 元素(即你点击的具体节点),而 event.currentTarget 指向当前事件监听器所绑定的元素(即你声明 onClick 的那个
✅ 正确写法如下:
const toggle = (event) => {
const id = event.currentTarget.value; // ✅ 始终指向 button 元素
console.log(id); // 输出预期的 el._id
};
// JSX 中保持不变
⚠️ 注意事项:
- 不要依赖 event.target.value 处理嵌套内容的按钮值,尤其在含图标、文字、SVG 等子节点时;
- currentTarget 在事件委托或合成事件中同样可靠,React 的 onClick 合成事件已确保 currentTarget 正确指向绑定元素;
- 若需兼容更复杂交互(如阻止图标默认行为),可额外调用 event.stopPropagation(),但本例中无需。
? 扩展建议:对于现代 React 开发,推荐优先使用 data-* 属性 + useCallback 避免闭包问题,例如:
toggle(e.currentTarget.dataset.id)} >
这种方式语义更清晰,且不依赖 value 属性(对非表单元素更通用)。










