React中如何从<select>组件获取选中项的ID？

要实现选择国家时提交ID而非名称，只需修改下拉选项的value属性，绑定国家ID即可，具体操作如下：

1. 修改下拉选项的value绑定
   在渲染国家选项时，给<option>标签添加value属性，将其值设为国家的ID（假设你的getcountry对象包含id字段）。这样选中选项时，表单的values.country会自动获取到对应ID：

   <select
     className="inputBox"
     name="country"
     onChange={handleChange}
     onBlur={handleBlur}
     value={values.country}
     id="country"
   >
     <option value=""> Country </option>
     {countriesname.map((getcountry) => (
       <option key={getcountry.id} value={getcountry.id}>{getcountry.name}</option>
     ))}
   </select>
   <p className="req-errors">
     {touched.country && errors.country}
   </p>
   

   注：添加key={getcountry.id}是React列表渲染的规范写法，可避免控制台警告。

2. 提交逻辑无需额外调整
   你的提交代码中已经直接使用values.country，现在这个值已经是国家ID，所以原有的RegisterAsPlayerForm里的country字段会自动携带ID发送给后端，不需要修改JavaScript提交逻辑。

完成以上修改后，用户选择国家时，表单就会将对应国家的ID而非名称传入数据库。

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