React中如何获取下拉选项的id而非名称？技术求助

原生HTML + JavaScript方案 #

• 把<option>标签的value属性直接设为州的ID，显示文本保留州名称：

<select id="stateSelect">
  <option value="1">加利福尼亚州</option>
  <option value="2">德克萨斯州</option>
</select>

• 监听选择事件时，直接通过e.target.value拿到ID：

document.getElementById('stateSelect').addEventListener('change', (e) => {
  const selectedId = e.target.value; // 这里拿到的就是目标ID
  console.log('选中的州ID:', selectedId);
  // 直接把这个ID传给后端就行
});

React方案（函数组件） #

有两种实用方式：

1. 直接给option绑定ID作为value

<select onChange={(e) => handleStateChange(e)}>
  {states.map(state => (
    <option key={state.id} value={state.id}>
      {state.name}
    </option>
  ))}
</select>

// 事件处理函数
const handleStateChange = (e) => {
  const selectedId = e.target.value;
  console.log('选中的州ID:', selectedId);
  // 调用后端接口传递ID
};

2. 通过名称反向匹配对象（仅特殊场景用）
   如果没法修改option的value，就从数据源里通过选中的名称找对应对象：

const handleStateChange = (e) => {
  const selectedName = e.target.value;
  const selectedState = states.find(state => state.name === selectedName);
  if (selectedState) {
    console.log('选中的州ID:', selectedState.id);
    // 提取ID传给后端
  }
};

Vue方案 #

• 用:value给option绑定ID，显示文本用州名称：

<select v-model="selectedStateId">
  <option v-for="state in states" :key="state.id" :value="state.id">
    {{ state.name }}
  </option>
</select>

<script setup>
import { ref } from 'vue';
const selectedStateId = ref('');
// 选中变化时，selectedStateId就是对应的ID，直接传给后端即可
</script>

内容的提问来源于stack exchange，提问作者MateusPessoa