React中自定义MUI Autocomplete：让选中项同时显示国旗与国名

你的问题在于renderOption仅控制下拉列表中选项的显示样式，而选中后输入框内的内容是由getOptionLabel或renderValue决定的，所以只改renderOption不会影响选中后的显示效果。

修正方案 #

添加renderValue属性来自定义选中后的显示内容，同时确保renderInput正确传递参数：

import { Autocomplete, TextField, Box } from '@mui/material';

export default function CountrySelect({ selectedCountry, onChange }) {
  return (
    <Autocomplete
      value={selectedCountry}
      onChange={onChange}
      id="country-select"
      options={countries}
      autoHighlight
      getOptionLabel={(option) => option.label}
      // 自定义下拉选项显示
      renderOption={(props, option) => (
        <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
          <img
            loading="lazy"
            width="20"
            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
            alt={option.label}
          />
          {option.label} ({option.code}) +{option.phone}
        </Box>
      )}
      // 自定义选中后输入框内的显示
      renderValue={(option) => (
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <img
            width="20"
            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
            alt={option.label}
            style={{ marginRight: 8 }}
          />
          {option.label}
        </Box>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          placeholder="Select a country"
        />
      )}
    />
  );
}

关键说明 #

• renderValue：专门用于定义选中后输入框内的显示内容，接收当前选中的option作为参数，返回自定义的JSX结构。
• 确保renderInput的参数是(params)而非直接传入对象，这样params会包含renderValue生成的内容，正确渲染到输入框中。
• 为图片添加有意义的alt属性，提升可访问性。

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