React下拉框onChange如何获取选项隐藏ID而非显示值？

嘿，我之前也碰到过一模一样的需求，其实只需要给<option>标签设置正确的value属性就搞定了！你现在的option没指定value，所以默认e.target.value就是显示的文本内容（也就是status.title），只要把value绑定成status.id，就能直接拿到你要的隐藏ID啦。

修改后的下拉框代码 #

<select id="inputIdentity" className="form-control content-input" onChange={this.handleStatusChange} >
  <option value="" hidden> Please Choose </option>
  {statusData ? (
    statusData.map((status) => (
      // 核心：把value设置为status.id
      <option key={status.id} value={status.id}>{status.title}</option>
    ))
  ) : (
    <option>Loading...</option>
  )}
</select>

注意：别忘了给map出来的option加上key属性，这是React列表渲染的强制要求，用status.id作为key刚好合适。

对应的handleStatusChange方法 #

如果你的status.id是数字类型，e.target.value会自动转成字符串，要是需要存数字类型的ID，可以手动转换一下：

handleStatusChange = (e) => {
  // 直接拿到id，按需转换类型
  const selectedStatusId = Number(e.target.value);
  this.setState({
    status: selectedStatusId
  });
};

另一种备选方案（不依赖value属性） #

要是你因为某些原因不想用value属性，还可以通过select的selectedIndex找到对应的选项，再从statusData里取出ID：

handleStatusChange = (e) => {
  const selectedIndex = e.target.selectedIndex;
  // 跳过第一个默认提示选项（索引为0）
  if (selectedIndex > 0 && statusData) {
    const selectedStatus = statusData[selectedIndex - 1];
    this.setState({
      status: selectedStatus.id
    });
  }
};

不过这种方法不如第一种直接，还得处理索引偏移的问题，所以优先推荐第一种方案哦！

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