在React中，要从多选选项（<select>）中获取所选的选项，需要用到一些特殊处理。本文将介绍如何通过React组件和事件处理来实现这个目标。
基础知识
要了解如何从多选<select>中获取选定的选项，首先需要了解以下基础知识：
- <select>元素允许用户选择一个或多个选项。
- 通过设置<select>元素的
multiple属性为true，可以启用多选模式。 - 每个选项都有一个唯一的
value属性，可以根据这个属性来确定哪些选项被选中。
实现方法
使用状态管理选中的选项
在React中，可以使用useState钩子来创建一个状态，该状态将存储选中的选项。每当用户选择或取消某个选项时，都会更新状态，并重新渲染组件。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ----- -
----- ----------------- ------------------- - -------------
-------- ------------------------- -
----- -------------- - ---------------------------------------- ------ -- --------------
-----------------------------------
-
------ -
-----
------- -------- ------------------------------
------- ----------------------------
------- ------------------------------
------- ------------------------------
---------
----------- -------- ------------------------ -------
------
--
-
------ ------- ----在上面的代码中，我们首先使用useState创建一个selectedOptions状态，它是一个数组，用于存储所有选中的选项的值。然后在<select>元素上设置onChange事件处理函数handleSelectChange，该函数将从<select>元素中获取所选选项的值，并使用setSelectedOptions将其更新到状态中。最后，我们将选定的选项作为文本显示在页面上。
使用Ref获取选择的选项
另一种方法是使用React的useRef钩子来引用<select>元素，并在需要时访问其属性和方法。这种方法不需要创建状态，因此可以避免重新渲染组件。
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
-------- ----- -
----- --------- - -------------
-------- ------------------- -
----- -------------- - --------------------------------------------- ------ -- --------------
--------------- -------- ------------------------ ------
-
------ -
-----
------- -------- ----------------
------- ----------------------------
------- ------------------------------
------- ------------------------------
---------
------- ------------------------------- -------- ----------------
------
--
-
------ ------- ----在上面的代码中，我们使用useRef创建一个引用对象selectRef，并将其传递给<select>元素的ref属性。然后，在按钮的单击事件处理函数中，我们可以使用selectRef.current.selectedOptions来访问所选选项的列表，并从中提取所选选项的值。
总结
在本文中，我们介绍了如何在React中从多选<select>元素中获取选定的选项。我们提供了两种不同的方法：一种是使用状态管理选中的选项，另一种是使用引用对象访问选择的选项。这些技术可以帮助您实现复杂的用户交互，并增强您的React开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28972