当前位置：首页 > React

react如何获取option的值

2026-01-25 00:18:20React

获取 `<option>` 值的方法

在 React 中，可以通过 select 元素的 onChange 事件获取选中的 <option> 值。以下是几种常见实现方式：

使用受控组件（推荐）

通过 value 和 onChange 控制 select 的状态，直接获取选中的值：

react如何获取option的值

import { useState } from 'react';

function SelectExample() {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (e) => {
    setSelectedValue(e.target.value); // 直接获取选中的值
  };

  return (
    <select value={selectedValue} onChange={handleChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>
  );
}

通过事件对象访问

onChange 事件的 event.target 指向 select 元素，可通过 value 属性获取当前选中的值：

react如何获取option的值

<select onChange={(e) => console.log(e.target.value)}>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

获取显示文本（非 value）

如果需要获取选项的显示文本（如 "Apple" 而非 "apple"）：

const handleChange = (e) => {
  const selectedText = e.target.options[e.target.selectedIndex].text;
  console.log(selectedText);
};

多选时的值获取

对于 multiple 选择框，需遍历获取所有选中值：

const handleMultiChange = (e) => {
  const selectedValues = Array.from(e.target.selectedOptions)
    .map(option => option.value);
  console.log(selectedValues);
};