React嵌套按钮点击与数据获取方法

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《React嵌套按钮点击与值获取技巧》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

在React应用中，当我们将图标（如来自`react-icons`库的SVG）嵌套在按钮等交互元素内部时，点击事件的目标（`event.target`）可能会指向内部的SVG元素而非期望的父级按钮，导致无法正确获取按钮的`value`属性。本教程将深入探讨这一常见问题，并提供两种主要的解决方案：利用`event.currentTarget`获取事件监听器所在的元素，以及通过事件处理函数直接传递参数或使用`data-*`属性，确保开发者能够准确地获取所需数据。

理解event.target与event.currentTarget的差异

在JavaScript的事件处理中，event.target和event.currentTarget是两个经常被混淆但至关重要的属性。

• event.target: 始终指向触发事件的那个元素，即事件冒泡路径上最深的那个元素。在嵌套结构中，如果你点击了内部的子元素，即使事件监听器绑定在父元素上，event.target也会是那个子元素。
• event.currentTarget: 始终指向事件监听器被绑定到的那个元素。无论事件实际是从哪个子元素冒泡上来的，event.currentTarget都会是绑定了onClick（或其他事件）处理函数的元素。

当你在一个按钮内部嵌套了一个SVG图标时，例如使用react-icons库，点击图标区域时，event.target将是SVG元素或其内部的path元素，而不是你期望的按钮元素。由于SVG元素通常没有value属性，尝试访问event.target.value会得到undefined。

考虑以下示例代码：

import React, { Component } from 'react';
import { BsFillTrashFill } from 'react-icons/bs';

class MyComponent extends Component {
  handleRemove = (event) => {
    // 当点击SVG图标时，event.target 可能是 SVG 或 path 元素
    // 这些元素没有 value 属性，因此 event.target.value 会是 undefined
    console.log('event.target:', event.target);
    console.log('event.target.value:', event.target.value);
  };

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

export default MyComponent;

在上述代码中，如果用户点击了垃圾桶图标的SVG部分，event.target将指向SVG元素或其内部的path元素，而按钮的value属性将无法通过event.target.value获取。

解决方案一：使用event.currentTarget

这是解决此问题的最直接和推荐的方法。通过使用event.currentTarget，你可以确保始终获取到事件监听器所附加的元素（即按钮），从而正确访问其value属性。

import React, { Component } from 'react';
import { BsFillTrashFill } from 'react-icons/bs';

class MyComponent extends Component {
  handleRemove = (event) => {
    // event.currentTarget 总是指向绑定事件处理函数的元素 (即按钮)
    const buttonElement = event.currentTarget;
    const value = buttonElement.value;
    console.log('event.currentTarget:', buttonElement);
    console.log('Button Value:', value);
    // 现在你可以使用这个 value 进行后续操作
    // 例如：this.removeItem(value);
  };

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

export default MyComponent;

优点：

• 符合DOM事件流的语义，清晰地表达了你希望操作的是哪个元素。
• 代码简洁，无需额外的数据传递。

解决方案二：直接传递参数或使用data-*属性

除了使用event.currentTarget，你还可以选择在事件处理函数被调用时直接传递所需的值，或者将值存储在元素的data-*属性中。

2.1 直接传递参数

你可以使用箭头函数或bind方法，在onClick事件中直接将value传递给事件处理函数。

import React, { Component } from 'react';
import { BsFillTrashFill } from 'react-icons/bs';

class MyComponent extends Component {
  // 修改事件处理函数，使其接受一个参数
  handleRemove = (id) => {
    console.log('ID to remove:', id);
    // 现在你可以直接使用 id 进行后续操作
    // 例如：this.removeItem(id);
  };

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

export default MyComponent;

优点：

• 非常明确地知道事件处理函数会接收到什么数据。
• 无需在处理函数内部从DOM元素中提取数据。

注意事项：

• 在循环渲染大量按钮时，每次渲染都会创建一个新的箭头函数，这可能会对性能产生轻微影响（通常可忽略不计）。对于性能敏感的场景，可以考虑使用bind或event.currentTarget。

2.2 使用data-*属性

HTML5引入了data-*属性，允许你在HTML元素上存储自定义数据。你可以将需要的值存储在data-id（或其他自定义名称）属性中，然后在事件处理函数中通过event.currentTarget.dataset来访问它。

import React, { Component } from 'react';
import { BsFillTrashFill } from 'react-icons/bs';

class MyComponent extends Component {
  handleRemove = (event) => {
    const buttonElement = event.currentTarget;
    // 通过 dataset 属性访问 data-* 属性
    const id = buttonElement.dataset.id; // 注意：data-id 会被转换为 dataset.id
    console.log('ID from data-attribute:', id);
    // 现在你可以使用 id 进行后续操作
    // 例如：this.removeItem(id);
  };

  render() {
    const data = { cId: 'item-123' };
    return (
      <button
        className="btnRemove"
        onClick={this.handleRemove}
        // 将值存储在 data-id 属性中
        data-id={data.cId}
      >
        <BsFillTrashFill size="30px" />
      </button>
    );
  }
}

export default MyComponent;

优点：

• 将数据与DOM元素关联起来，方便调试。
• 对于需要从DOM中获取多个相关数据的情况，dataset提供了一种结构化的访问方式。

导入自定义SVG作为React组件的补充说明

原始问题中提及的解决方案import { ReactComponent as YourSvg } from './your-svg.svg';是create-react-app（或其他支持SVG模块导入的构建工具）提供的一个强大功能。它允许你将本地的.svg文件作为React组件直接导入和使用。

// 假设你有一个名为 'my-icon.svg' 的本地SVG文件
import { ReactComponent as MyCustomIcon } from './my-icon.svg';

function CustomIconButton() {
  return (
    <button>
      <MyCustomIcon className="custom-icon" width="24" height="24" />
      点击我
    </button>
  );
}

这个功能对于使用自定义SVG图标非常有用，因为它将SVG转换为一个可操作的React组件，你可以像其他组件一样传递props（如className, width, height等）。

然而，需要明确的是，react-icons库中的图标已经是以React组件的形式提供，它们本身就是经过优化和封装的SVG组件。因此，对于react-icons的使用场景，你无需再通过import { ReactComponent as ... } from ...这种方式来导入它们。react-icons组件本身已经处理了SVG的渲染，并且其内部结构也可能导致与自定义SVG相同的event.target问题，因此上述关于event.currentTarget或直接传递参数的解决方案同样适用。

总结与最佳实践

当在React中处理嵌套了图标（尤其是react-icons）的按钮点击事件时，为了正确获取按钮的属性值，请记住以下几点：

1. 首选event.currentTarget: 它是最简洁、最符合语义且性能最优的解决方案，能够确保你总是获取到事件监听器绑定的元素。
2. 考虑直接传递参数: 如果你的事件处理函数只需要一个或几个明确的值，并且这些值在渲染时是已知的，通过箭头函数直接传递参数是一种非常直观的方式。
3. *利用`data-属性**: 当你需要从DOM元素中获取多个相关数据，或者希望将数据与DOM结构清晰地关联起来时，data-*属性结合dataset`是一个不错的选择。
4. 区分react-icons与自定义SVG导入: react-icons库提供的图标已经是React组件，直接导入即可。import { ReactComponent as ... } from ...主要用于将本地的.svg文件转换为React组件。

通过理解event.target和event.currentTarget的区别，并根据具体场景选择合适的解决方案，你可以高效且准确地处理React应用中复杂的事件交互。

理论要掌握，实操不能落！以上关于《React嵌套按钮点击与数据获取方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！