Блог

Главная - Вопросы по программированию - Как отобразить выбранное значение иначе, чем значение в раскрывающемся меню?

Как отобразить выбранное значение иначе, чем значение в раскрывающемся меню?

#reactjs #material-ui #next.js

Вопрос:

Я изучаю материал и пытаюсь сделать так, чтобы в раскрывающемся списке отображалось полное название региона, но при выборе опции оно будет отображаться как значение (например, «NA1»). Есть ли какой-нибудь способ сделать это?

введите описание изображения здесь

Мой текущий код:

         <FormControl
          sx={{position: 'absolute', right: '2%', top: '50%', transform: 
            'translateY(-50%)'}}
        >
          <Select
            size='small'
            value={region}
            onChange={updateRegion}
          >
            <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>

Ответ №1:

сохраните выбранное значение и установите свойство ключа и значения равным свойству значения :

 const [region, setRegion] = useState({key:'',value:''});
const updateRegion=(e)=>{
    setRegion(state=>({key:e.target.value,value:e.target.value}));
}
<FormControl
sx={{position: 'absolute', right: '2%', top: '50%', transform:
    'translateY(-50%)'}}
>
<Select
size='small'
value={region}
onChange={updateRegion}
    >
    <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>
Метки: ,