React MUI Autocomplete组件自定义renderInput：实现选中项国家代码加粗显示

嗨，这个问题我之前也碰到过！你说得对，renderInput里确实没法直接拿到选中的option，不过MUI的Autocomplete其实提供了专门的属性来解决这个需求——就是renderValue。

核心思路 #

renderValue属性允许你完全自定义选中选项后输入框内的显示内容，它会接收当前选中的option作为参数，这样你就能像在renderOption里那样，把国家代码用<b>标签包裹起来了。

修改后的完整代码 #

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

export default function CountrySelect() {
  return (
    <Autocomplete
      id="country-select-demo"
      sx={{ width: 300 }}
      options={countries}
      autoHighlight
      getOptionLabel={(option) => `${option.code} ${option.label}`}
      // 自定义下拉选项的显示（保持你原来的逻辑）
      renderOption={(props, option) => (
        <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
          <img
            loading="lazy"
            width="20"
            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
            alt=""
          />
          {option.label} (<b>{option.code}</b>) +{option.phone}
        </Box>
      )}
      // 新增：自定义选中后输入框的显示内容
      renderValue={(option) => {
        // 处理未选中任何选项的情况
        if (!option) return '';
        return (
          <Box component="span">
            {option.label} (<b>{option.code}</b>) +{option.phone}
          </Box>
        );
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          inputProps={{
            ...params.inputProps,
            autoComplete: 'new-password', // disable autocomplete and autofill
          }}
        />
      )}
    />
  );
}

额外说明 #

• getOptionLabel主要用于内部的筛选、匹配逻辑，以及当renderValue未定义时的默认显示，所以你可以保留原来的写法，不影响功能。
• renderValue里要记得处理option为null的场景（比如用户清空选择时），避免出现报错。

这样修改后，不管是下拉选项里还是选中后的输入框内，国家代码都会以加粗的形式显示啦！

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