如何在React select 元素中获取多个选中项值

本文旨在解决React `select` 组件中获取多个选中项值的问题。当尝试将对象直接赋给 `option` 的 `value` 属性时，常会遇到 `[Object object]` 的情况。教程将详细介绍两种主流解决方案：一是通过存储唯一标识符并在 `onChange` 事件中检索完整数据对象，二是通过使用HTML `data-*` 属性来附加和访问额外信息，确保在用户选择时能高效地获取所需的全部数据。

在React应用中，select 元素是用户进行选项选择的常用组件。然而，当我们需要从用户选择的 option 中获取多个相关联的值（例如，一个运费选项的 id 和 amount）时，直接将一个JavaScript对象赋给 option 的 value 属性会导致意想不到的结果——在 onChange 事件中，e.target.value 会显示 [Object object]。这是因为HTML option 元素的 value 属性始终期望一个字符串类型的值。当赋给它一个对象时，JavaScript会尝试将其转换为字符串，从而产生 [Object object]。

为了解决这个问题，我们可以采用以下几种策略来有效地获取多个相关联的值。

方法一：存储唯一标识符并检索完整数据对象

这是处理 select 元素中多值选择的推荐方法之一。其核心思想是让 option 的 value 属性存储一个唯一的标识符（如 id），然后在 onChange 事件处理器中，利用这个标识符从原始数据数组中查找并获取完整的对象。

工作原理

1. option value 存储唯一ID： 将 rates 数组中每个对象的唯一 id 赋给 option 的 value 属性。
2. onChange 事件处理： 当用户选择一个选项时，e.target.value 将包含所选 option 的 id。
3. 数据检索： 使用这个 id 在原始 rates 数组中查找对应的完整对象，从而获取 id 和 amount 等所有相关信息。

示例代码

假设我们有以下运费费率数据：

const rates = [
  { id: 'r8f8hd8', service: 'Standard Shipping', amount: 45 },
  { id: 'r8f8hd', service: 'Express Shipping', amount: 450 },
  { id: 'r9g9ie9', service: 'Overnight Shipping', amount: 750 },
];

登录后复制

React组件中的 select 元素及其 onChange 处理：

标签： react javascript java html html5 处理器 html元素