如何获取Material UI TextField Select组件选中项的显示文本

方案1：通过已有ID从源数组匹配获取文本 #

不需要改动现有逻辑，直接用当前存储的MunicipioId到municipios数组中查找对应项即可：

// 需要用到选中文本时执行以下逻辑
const selectedMunicipio = municipios.find(item => item.MunicipioId === MunicipioId)
// 选中的显示文本为 selectedMunicipio?.MunicipioNombre，加可选链避免匹配不到时报错

如果需要频繁使用该文本，可以用useMemo缓存结果减少重复计算：

import { useMemo } from 'react'

// 组件内部声明
const selectedMunicipioNombre = useMemo(() => {
  const target = municipios.find(item => item.MunicipioId === MunicipioId)
  return target?.MunicipioNombre || ''
}, [municipios, MunicipioId])

方案2：修改State存储结构，选中时直接存储文本 #

如果需要高频使用选中文本，可以调整State结构，在选择时就把对应文本存下来：

1. 调整State声明

// 把原来只存ID的结构改成存储完整选中信息的对象
const [selectedMunicipio, setSelectedMunicipio] = useState({
  MunicipioId: 0,
  MunicipioNombre: ''
})

2. 修改选择事件逻辑

const handleChangeMunicipioSeleccionado = (e) => {
    const selectedId = e.target.value
    const targetMunicipio = municipios.find(item => item.MunicipioId === selectedId)
    setSelectedMunicipio(targetMunicipio || { MunicipioId: 0, MunicipioNombre: '' })
    setBarrioId(0)
    traerBarriosPorMunicipio(selectedId)
}

3. 调整TextField的value属性

<TextField
  variant = "outlined"
  onChange={handleChangeMunicipioSeleccionado}
  value={selectedMunicipio.MunicipioId}
  label="Municipio"
  fullWidth
  select
>
{municipios.length > 0 ? municipios.map((municipio)=>(
    <MenuItem key={municipio.MunicipioId} value={municipio.MunicipioId}>{municipio.MunicipioNombre}</MenuItem>
)): <MenuItem disabled>No se encontraron municipios</MenuItem>}
</TextField>

后续需要用到显示文本时直接取selectedMunicipio.MunicipioNombre即可。

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