如何在React中获取select-option的值？

在React中获取<select>元素选中的值可以通过以下几种方式实现，具体取决于你使用的组件类型（受控组件或非受控组件）和React版本：

1. 受控组件方式（推荐）

通过React的state和onChange事件绑定实现双向数据绑定。

import React, { useState } from 'react';

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

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <div>
      <select value={selectedValue} onChange={handleChange}>
        <option value="">请选择</option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
      <p>当前选中的值: {selectedValue}</p>
    </div>
  );
}

export default SelectExample;

优势：

完全由React状态管理，数据流清晰。
支持动态默认值、表单验证等场景。

2. 非受控组件方式

通过ref直接访问DOM元素获取值（适用于简单场景）。

import React, { useRef } from 'react';

function UncontrolledSelect() {
  const selectRef = useRef(null);

  const handleSubmit = () => {
    alert(`选中的值: ${selectRef.current.value}`);
  };

  return (
    <div>
      <select ref={selectRef}>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
      </select>
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
}

适用场景：

快速原型开发或简单表单。
需要与第三方非React库集成时。

3. 获取选中的文本（非value）

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

const handleChange = (event) => {
  const selectedText = event.target.options[event.target.selectedIndex].text;
  console.log(selectedText); // 输出如 "Banana"
};

4. 多选（multiple select）

通过multiple属性和数组类型的state管理：

function MultiSelect() {
  const [selectedValues, setSelectedValues] = useState([]);

  const handleChange = (event) => {
    const options = Array.from(event.target.options)
      .filter(option => option.selected)
      .map(option => option.value);
    setSelectedValues(options);
  };

  return (
    <select multiple onChange={handleChange}>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
    </select>
  );
}