如何在 MUI 的自动完成中获取 'startAdornment' 中的动态图像？

Question

我正在使用 MUI 的自动完成组件将我的一些对象显示为建议。 一切正常，但我将头像作为开始装饰放置在文本字段内（在 renderInput 内），我希望在其中放置所选内容的相应图像道具的值。

我想要什么：我希望在自动完成中选择任何值（我的object中有一个图像属性，我将其数组映射到自动完成的选项属性）。 所以，我想要相应的图像，连同选项 label（在文本字段内），相应的图像也应该显示在startAdornment内。 好吧，我希望它类似于我们在发布新工作时填写的 LinkedIn公司字段。

这是我的 MUI 自动完成功能，我是“打字稿”的新手。

 <Autocomplete
         open = {open}
         onOpen = {() => setOpen(true)}
         onClose = {() => setClose(true)}
         options = {items.sort((a, b) => -b.name.localeCompare(a.name))}
         isOptionEqualToValue = {(option, value) => option.name === value.name}
         getOptionLabel = {(option : any) => option.name}
         renderInput = {(params : any ) => (
           <TextField
            {...params}
            className = {'inputField'} 
            placeholder = {'Enter item name'}
            label = {'items'}
            InputProps = {{
              ...params.InputProps,
              startAdornment : ( <Avatar src = {params.image} /> ) 
             }} />
         )}
         renderOption = {(props, option) => {

          return (
            <li
             key = {option.id}
             {option.name}
            </li> )}} />

所以我希望无论从自动完成中选择什么名称，其相应的图像都应该显示在头像中（在 startadornment 内部）。 如何做到这一点？

而且，是的，这是我的 Object 阵列就像 -

[{ id : number, name : string, image : string }, {...}, {...}, and so on...];

这里的图像是图像的 url，（我希望在 startAdornment 中显示到头像中。）

我需要为此提供新的 state 吗？

所有建议都会得到赞赏，急切地寻找合适的答案。

Answer 1

我的方法是创建一个 state 来存储 select 值，只要这个 state 发生变化，它就会更新头像组件：

const [value, setValue] = useState("");

const AvatarAdornment = useMemo(()=> 
    <Avatar src={items.find(item =>item.name === value).image} />,
[value, items])

在您的自动完成组件中使用它：

<Autocomplete
     open = {open}
     onOpen = {() => setOpen(true)}
     onClose = {() => setClose(true)}
     options = {items.sort((a, b) => -b.name.localeCompare(a.name))}
     isOptionEqualToValue = {(option, value) => option.name === value.name}
     getOptionLabel = {(option : any) => option.name}
     renderInput = {(params : any ) => (
       <TextField
        {...params}
        className = {'inputField'} 
        placeholder = {'Enter item name'}
        label = {'items'}
        InputProps = {{
          ...params.InputProps,
          startAdornment : ( <AvatarAdornment/> ) 
         }} />
     )}
     renderOption = {(props, option) => {

      return (
        <li
         key = {option.id}
         {option.name}
        </li> )}} />