React组件中图标点击与值获取技巧

本篇文章给大家分享《React组件中图标点击与值获取方法》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

本教程探讨在React组件中，当使用`react-icons`等库嵌套图标于可点击元素（如按钮）内部时，点击事件目标（`event.target`）可能指向图标而非父元素的问题。文章将详细介绍如何通过利用`event.currentTarget`属性或直接传递参数两种策略，确保准确获取所需的数据或执行相应操作，避免`value`属性获取失败的常见困扰。

在React应用开发中，我们经常需要在交互式组件（如按钮）内部嵌入图标，以提升用户界面的直观性和美观性。像react-icons这样的库极大地简化了这一过程，它将SVG图标封装为易于使用的React组件。然而，这种嵌套结构有时会在处理点击事件时引入一个常见的陷阱：当用户点击图标本身时，事件的实际目标（event.target）可能不再是包裹图标的父元素，而是图标内部的SVG元素或其路径（path）元素，这会导致尝试通过event.target.value获取父元素value属性时返回undefined。

理解event.target的陷阱

考虑以下使用react-icons中BsFillTrashFill图标的按钮示例：

import { BsFillTrashFill } from "react-icons/bs";

class MyComponent extends React.Component {
  handleRemove = (event) => {
    // 当点击SVG图标时，event.target可能指向SVG或其内部的path元素
    // 此时 event.target.value 将是 undefined
    console.log("Clicked target value:", event.target.value);
    // 预期的行为是获取按钮的 value (data.cId)
  };

  render() {
    const data = { cId: "item-123" }; // 示例数据
    return (
      <button
        className="btnRemove"
        onClick={this.handleRemove}
        value={data.cId}
      >
        <BsFillTrashFill size="30px" />
      </button>
    );
  }
}

在这个例子中，如果用户精确地点击了BsFillTrashFill图标的SVG部分或其内部的某个path元素，那么handleRemove函数中的event.target将指向该SVG或path元素。由于这些内部元素通常没有value属性，event.target.value就会是undefined，而不是我们期望的按钮上设置的data.cId。

解决方案一：利用event.currentTarget

为了解决这个问题，我们可以利用事件对象中的另一个属性：event.currentTarget。

• event.target: 指向实际触发事件的元素（例如，被点击的SVG或path元素）。
• event.currentTarget: 指向事件监听器所附加的元素（例如，我们附加onClick监听器的元素）。

因此，无论用户点击按钮内部的哪个子元素，event.currentTarget始终指向按钮本身。

import { BsFillTrashFill } from "react-icons/bs";

class MyComponent extends React.Component {
  handleRemove = (event) => {
    // 使用 event.currentTarget 获取事件监听器所附加的元素
    // 此时 event.currentTarget 总是指向 button 元素
    console.log("Clicked current target value:", event.currentTarget.value);
    // 这将正确输出 "item-123"
  };

  render() {
    const data = { cId: "item-123" };
    return (
      <button
        className="btnRemove"
        onClick={this.handleRemove}
        value={data.cId}
      >
        <BsFillTrashFill size="30px" />
      </button>
    );
  }
}

通过将event.target.value替换为event.currentTarget.value，我们就能确保无论点击按钮的哪个部分（包括内部的图标），都能准确地获取到按钮上设置的value属性。

解决方案二：直接传递参数

在React中，一种更符合组件化思想且通常更简洁的解决方案是，在事件处理函数中直接传递所需的数据，而不是依赖于从DOM事件对象中提取。这避免了对DOM结构的隐式依赖，使代码更具可读性和健壮性。

import { BsFillTrashFill } from "react-icons/bs";

class MyComponent extends React.Component {
  // handleRemove 函数现在直接接收 cId 作为参数
  handleRemove = (itemId) => {
    console.log("Item ID to remove:", itemId);
    // 这将正确输出 "item-123"
    // 执行删除操作...
  };

  render() {
    const data = { cId: "item-123" };
    return (
      <button
        className="btnRemove"
        // 使用箭头函数在 onClick 中直接调用 handleRemove 并传递 data.cId
        onClick={() => this.handleRemove(data.cId)}
      >
        <BsFillTrashFill size="30px" />
      </button>
    );
  }
}

这种方法有几个优点：

• 清晰性: 事件处理函数handleRemove的意图更明确，它直接接收一个itemId，而不是一个事件对象。
• 解耦: 代码不再依赖于button元素必须有一个value属性，或者event.target的特定行为。
• 可测试性: handleRemove函数更容易独立测试。

选择合适的策略

• 使用event.currentTarget: 当你需要访问事件监听器所附加的DOM元素的通用属性（如value、id、dataset等），并且不希望直接将数据作为参数传递时，此方法非常有用。它适用于需要泛化处理，或者事件处理器需要访问事件触发的上下文DOM元素的情况。
• 直接传递参数: 在大多数React组件中，这是推荐的做法。它更符合React的数据流思想，使得组件的逻辑更清晰，依赖更少，也更易于维护。当事件处理器需要特定数据（如ID）来执行操作时，直接传递参数是最佳选择。

注意事项与最佳实践

1. 事件委托: React的事件系统实际上是基于事件委托的。它将事件监听器附加到文档根部，然后根据event.target向上冒泡来模拟事件。理解event.target和event.currentTarget的区别对于正确处理事件至关重要。
2. 可访问性: 确保你的按钮是可访问的。即使内部有图标，按钮本身也应该能够通过键盘聚焦和激活。react-icons组件本身通常不会影响可访问性，但确保按钮有适当的aria-label或文本内容可以提升用户体验。
3. 数据管理: 尽量避免将重要的业务数据完全存储在DOM元素的value属性中。如果数据已经存在于组件的状态（state）或属性（props）中，直接通过这些途径访问或传递它会更安全、更React化。

总结

在React组件中处理嵌套图标的点击事件时，event.target指向内部SVG元素导致无法获取父元素value是一个常见问题。通过理解event.target和event.currentTarget的区别，我们可以使用event.currentTarget.value来 reliably 获取事件监听器所附加的元素的value。更推荐的React实践是直接通过箭头函数在onClick中向事件处理函数传递所需的数据。选择哪种方法取决于具体的场景和个人偏好，但直接传递参数通常能带来更清晰、更健壮的代码。

今天关于《React组件中图标点击与值获取技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！