react如何获取option的值
获取 <option> 值的方法
在 React 中，可以通过 select 元素的 onChange 事件获取选中的 <option> 值。以下是几种常见实现方式：
使用受控组件（推荐）
通过 value 和 onChange 控制 select 的状态，直接获取选中的值：
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 属性获取当前选中的值：
<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);
};注意事项
- 受控组件需配合状态管理（如
useState） - 非受控组件可通过
useRef访问 DOM 节点，但推荐优先使用受控模式 - 动态生成的选项需确保每个
option有唯一的key和value
