ReactJs 从 Material UI Autocomplete 获取 id 而不是值

Question

我正在使用 Material UI 自动完成来获取国家/地区列表，并且我需要获取选定的国家/地区 ID 以发送回数据库。

<Autocomplete
   options={this.state.countries.map(option => option.name_en + ` (${option.name_native})`)}
   id="discountType"
   value={this.state.makeCountry}
   onChange={(e, value) => this.logCountry(e, value)}
   renderInput={(params) =>
   <TextField
      {...params}
      variant="outlined"
      label="Select make country"
   />}
/>

我需要将 option.id 与值一起发送到 logCountry 函数。

Answer 1

创建 时options，您可以将它们转换为以下格式的对象：

const options = this.state.countries.map(option => ({ id: option.id, label: option.name_en + ` (${option.name_native})`}));

然后您可以使用 访问所选选项 ID onChange={(e, value) => this.logCountry(e, value.id)}。

我已经分叉了MUI Autocomplete 的文档stackblitz 示例来实现此类行为，您可以在此处查看。