react如何获取option的下标和值_select选中获取索引三种写法

获取option的下标和值：

1. 使用原生JavaScript的selectedIndex和value属性

const selectElement = document.getElementById('mySelect');
const index = selectElement.selectedIndex;
const value = selectElement.value;

console.log("选中项的索引：" + index);
console.log("选中项的值：" + value);

2. 使用React组件的onChange事件

class MySelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
    console.log("选中项的索引：" + event.target.selectedIndex);
    console.log("选中项的值：" + event.target.value);
  }

  render() {
    return (
      <select value={this.state.value} onChange={this.handleChange}>
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橙子</option>
      </select>
    );
  }
}

获取选中项的索引：

3. 使用ref属性获取DOM元素，然后使用selectedIndex属性

class MySelect extends React.Component {
  constructor(props) {
    super(props);
    this.selectRef = React.createRef();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const selectElement = this.selectRef.current;
    console.log("选中项的索引：" + selectElement.selectedIndex);
  }

  render() {
    return (
      <div>
        <select ref={this.selectRef}>
          <option value="apple">苹果</option>
          <option value="banana">香蕉</option>
          <option value="orange">橙子</option>
        </select>
        <button onClick={this.handleClick}>获取选中项的索引</button>
      </div>
    );
  }
}