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