React中MUI v5 Autocomplete TextField选中项图标显示失败求助

问题根源 #

1. 错误使用inputProps而非InputProps：TextField的startAdornment属于InputProps（大写I）配置项，而非inputProps（小写i）——后者是传递给原生input元素的属性，无法正确渲染装饰元素。
2. 未合并原有InputProps：直接覆盖InputProps会丢失Autocomplete自带的功能（如清除按钮），需要合并原有参数。
3. 未处理空选择场景：当清空选中项时，onChange的value为null，直接取value['icon']会导致报错。

修正后的代码 #

import { useState } from 'react'
import { TextField, InputAdornment, Autocomplete, Box } from '@mui/material';
import v1 from './v1.svg';
import v2 from './v2.svg';
import v3 from './v3.svg';
import v4 from './v4.svg';

function App() {
  const [useicon, setUseicon] = useState(v1);
  const options = [
    { label: "تتر", icon: v1 },
    { label: "بایننس", icon: v2 },
    { label: "بی اس دی", icon: v3 },
    { label: "دای", icon: v4 },
  ]

  return (
    <div>
      <Autocomplete
        options={options}
        getOptionLabel={(option) => option.label}
        onChange={(e, value) => {
          // 处理空选择情况
          setUseicon(value?.icon || v1);
        }}
        sx={{ width: "300px" }}
        renderOption={(props, option) => (
          <Box component="li" {...props}>
            <img src={option.icon} style={{ width: "50px", height: "50px" }} alt={option.label} />
            {option.label}
          </Box>
        )}
        renderInput={(params) => (
          <TextField
            {...params}
            // 使用InputProps而非inputProps，并合并原有配置
            InputProps={{
              ...params.InputProps,
              startAdornment: (
                <InputAdornment position='start'>
                  <img src={useicon} style={{ width: "50px", height: "50px" }} alt="selected-icon" />
                </InputAdornment>
              ),
            }}
          />
        )}
      />
    </div>
  )
}

export default App;

关键修改点 #

• 将inputProps改为InputProps，确保装饰元素被正确挂载到TextField的输入容器中。
• 合并params.InputProps，保留Autocomplete的默认功能（如清除按钮、下拉箭头）。
• 在onChange中使用可选链value?.icon，并设置默认值v1，避免空值报错。
• 给装饰元素的img添加宽高样式，确保图标正常显示（可根据需求调整）。

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