react如何获取option的值
获取 <option> 值的常见方法
在 React 中，可以通过以下方式获取 <select> 元素中选中的 <option> 值：
使用受控组件（推荐）
通过 value 和 onChange 事件绑定状态，直接获取选中的值：
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>
);选中的值会存储在 selectedValue 状态中。
使用 useRef（非受控组件）
通过 ref 直接访问 DOM 元素获取值：
const selectRef = useRef(null);
const handleClick = () => {
console.log(selectRef.current.value);
};
return (
<>
<select ref={selectRef}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<button onClick={handleClick}>Get Value</button>
</>
);获取显示文本（非 value）
若需要获取 <option> 的显示文本（如 "Option 1"），可通过 e.target.options 和选中索引：
const handleChange = (e) => {
const selectedText = e.target.options[e.target.selectedIndex].text;
console.log(selectedText);
};注意事项
- 受控组件是 React 官方推荐的方式，更适合表单管理。
- 非受控组件（如
useRef）在需要直接操作 DOM 时使用，但可能违背 React 数据流原则。 - 动态生成
<option>时，确保每个value唯一且与状态匹配。
