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

在React中获取`<select>`元素中`<option>`的值和索引有以下三种写法：

1. 通过`selectedIndex`属性获取选中的索引，再通过`options`集合获取对应的值。

function handleSelectChange(event) {
  const selectedIndex = event.target.selectedIndex;
  const selectedOption = event.target.options[selectedIndex];
  const value = selectedOption.value;
  console.log('选中的值为：', value);
  console.log('选中的索引为：', selectedIndex);
}

<select onChange={handleSelectChange}>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

2. 在`<option>`元素中设置`data-*`属性，通过`event.target.dataset`获取选中的值和索引。

function handleSelectChange(event) {
  const value = event.target.value;
  const index = event.target.dataset.index;
  console.log('选中的值为：', value);
  console.log('选中的索引为：', index);
}

<select onChange={handleSelectChange}>
  <option value="option1" data-index="0">选项1</option>
  <option value="option2" data-index="1">选项2</option>
  <option value="option3" data-index="2">选项3</option>
</select>

3. 使用`event.target.options`集合遍历所有`<option>`元素，找到被选中的元素，获取其值和索引。

function handleSelectChange(event) {
  const options = event.target.options;
  for (let i = 0; i < options.length; i++) {
    const option = options[i];
    if (option.selected) {
      const value = option.value;
      const index = option.index;
      console.log('选中的值为：', value);
      console.log('选中的索引为：', index);
      break;
    }
  }
}

<select onChange={handleSelectChange}>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>