如何让Material UI Select选中显示的值与下拉菜单展示内容不同？

你可以直接使用Material UI Select组件自带的renderValue属性实现需求，该属性可以自定义选中值在输入框内的渲染内容，无需修改原有选中逻辑。

修改后完整代码 #

<FormControl
  sx={{position: 'absolute', right: '2%', top: '50%', transform: 
    'translateY(-50%)'}}
>
  <Select
    size='small'
    value={region}
    onChange={updateRegion}
    // 新增这一行控制选中后显示的内容
    renderValue={(selectedValue) => selectedValue}
  >
    <MenuItem value='NA1'>North America</MenuItem> 
    <MenuItem value='JP1'>Japan</MenuItem>
    <MenuItem value='KR'>Korea</MenuItem>
    <MenuItem value='EUW1'>Europe West</MenuItem>
    <MenuItem value='EUN1'>Europe North</MenuItem>
    <MenuItem value='BR1'>Brazil</MenuItem>
  </Select>
</FormControl>

逻辑说明 #

• 下拉菜单展开时，展示的是MenuItem组件内部的文本，也就是完整地区名称，和原有效果一致
• 选中选项后，renderValue回调会拿到当前选中的编码值，直接返回后输入框就会显示编码而非地区全称
• 原有updateRegion回调逻辑不需要修改，依旧可以正常获取选中的地区编码

优化建议 #

如果后续需要新增地区选项，建议把地区配置抽为独立数组，避免重复编写MenuItem代码：

// 抽离的地区配置
const regionOptions = [
  { code: 'NA1', name: 'North America' },
  { code: 'JP1', name: 'Japan' },
  { code: 'KR', name: 'Korea' },
  { code: 'EUW1', name: 'Europe West' },
  { code: 'EUN1', name: 'Europe North' },
  { code: 'BR1', name: 'Brazil' }
]

// 渲染时直接遍历配置
<Select
  size='small'
  value={region}
  onChange={updateRegion}
  renderValue={(selectedValue) => selectedValue}
>
  {regionOptions.map(option => (
    <MenuItem key={option.code} value={option.code}>
      {option.name}
    </MenuItem>
  ))}
</Select>

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