React使用Material UI Autocomplete如何获取选中项id而非显示值

你当前的实现是把options直接映射为拼接好的字符串数组，导致原始option里的id等属性全部丢失，onChange拿到的value只有字符串内容，没法获取id。按下面的方式调整即可：

1. 直接传入原始国家对象数组作为options，不要提前转成字符串
2. 通过getOptionLabel属性控制选项的显示文本，保留你原来的显示格式
3. onChange回调拿到的value就是完整的选中国家对象，直接提取id和对应显示值传给logCountry即可

修改后的代码如下：

<Autocomplete
   options={this.state.countries}
   id="discountType"
   value={this.state.makeCountry}
   // 处理对象匹配逻辑，避免引用不同导致选中状态失效
   isOptionEqualToValue={(option, value) => option.id === value.id}
   // 控制选项和输入框的显示文本
   getOptionLabel={(option) => `${option.name_en} (${option.name_native})`}
   onChange={(e, value) => {
     const showValue = `${value.name_en} (${value.name_native})`
     this.logCountry(e, value.id, showValue)
   }}
   renderInput={(params) =>
   <TextField
      {...params}
      variant="outlined"
      label="Select make country"
   />}
/>

额外注意：如果你的this.state.makeCountry之前存储的是拼接后的国家名称字符串，需要调整为存储完整的国家对象；如果之前存的是国家id，要把value属性调整为this.state.countries.find(item => item.id === this.state.makeCountry) || null来匹配正确的选中项。

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