如何在MUI Autocomplete的startAdornment中显示选中项的动态图片？

问题场景 #

使用MUI的Autocomplete组件展示对象数组作为选项，希望在TextField的startAdornment中显示选中项对应的image字段（头像），文本框内显示选项名称，效果类似LinkedIn发布职位时的公司选择框。当前代码中params.image无法获取到选中项的图片地址，需要调整实现方式。

解决方案 #

需要维护一个状态来跟踪选中的选项，具体步骤如下：

1. 定义TypeScript类型
   先给选项对象明确类型，避免使用any：

   type Item = {
     id: number;
     name: string;
     image: string;
   };
   

2. 新增选中项状态
   使用React useState保存当前选中的选项：

   const [selectedItem, setSelectedItem] = useState<Item | null>(null);
   

3. 绑定Autocomplete的value与onChange
   将状态与Autocomplete的选中值绑定，同步更新选中项：

   <Autocomplete
     open={open}
     onOpen={() => setOpen(true)}
     onClose={() => setOpen(false)}
     options={items.sort((a, b) => -b.name.localeCompare(a.name))}
     isOptionEqualToValue={(option, value) => option.id === value.id}
     getOptionLabel={(option: Item) => option.name}
     value={selectedItem}
     onChange={(_, newValue) => setSelectedItem(newValue)}
     renderInput={(params) => (
       <TextField
         {...params}
         className="inputField"
         placeholder="Enter item name"
         label="items"
         InputProps={{
           ...params.InputProps,
           startAdornment: selectedItem ? (
             <Avatar src={selectedItem.image} sx={{ marginRight: 1 }} />
           ) : params.InputProps.startAdornment,
         }}
       />
     )}
     renderOption={(props, option) => (
       <li {...props} key={option.id}>
         <Avatar src={option.image} sx={{ marginRight: 1 }} />
         {option.name}
       </li>
     )}
   />
   

关键说明 #

• 原代码中params.image无效，因为renderInput的params对象不包含选中项的image属性，必须通过绑定的selectedItem状态获取。
• 使用id作为isOptionEqualToValue的判断依据，比name更可靠（避免名称重复导致的匹配错误）。
• 处理未选中状态：当没有选中项时，保留TextField原有的startAdornment（比如Autocomplete自带的清除按钮），避免布局错乱。

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