如何在HTML Select的onChange中传递额外值？代码问题求解

为什么e.target.code返回undefined？ #

e.target指向的是整个<select>元素，而非当前选中的<option>标签。你给<option>添加的code是自定义属性，<select>本身并没有这个属性，所以直接访问e.target.code自然拿不到对应的值。

用拼接value再拆分的方法解决 #

步骤1：修改<option>的value属性 #

把isoCode和国家名称用一个不会出现在国家名称里的分隔符（比如|）拼接起来，作为<option>的value：

<select className="form-select" onChange={(e)=>changeCountry(e)}>
  <option selected>Country</option>
  {Country.getAllCountries().map((item, index) => (
    <option value={`${item.isoCode}|${item.name}`} key={index}>
      {item.name}
    </option>
  ))}
</select>

步骤2：修改changeCountry函数拆分value #

在事件处理函数里，把拿到的value按分隔符拆分，分别提取isoCode和国家名称：

const changeCountry = (e) => {
  // 拆分value，获取isoCode和正常格式的国家名称
  const [isoCode, countryName] = e.target.value.split('|');
  
  // 保存正常格式的国家名称
  setCountry(countryName);
  
  // 用isoCode获取对应州数据
  const countryStates = State.getStatesOfCountry(isoCode);
  console.log("The state of the country", countryStates);
  setAllStateType(countryStates);
}

注意：如果你的国家名称里可能包含|，建议换一个更特殊的分隔符（比如###），避免拆分时出现错误。

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