未显示选定值的MUI selected
未显示选定值的MUI selected
提问于 2022-03-12 17:18:22
嘿，我遇到了一个问题，我用MUI选择功能为我选择一个国家。不知道为什么当我选择国家时，它会改变它的值，但是在选中框中它不会显示任何东西。
const [selectedCountry, setSelectedCountry] = useState({});
const handleChangeCountry = (event) => {
setCountryValue(event.target.value);
};
<FormControl sx={{ m: 1, width: 400 }}>
<InputLabel id="country-label">Country</InputLabel>
<Select
labelId="country-label"
id="country"
value={selectedCountry}
onChange={handleChangeCountry}
MenuProps={MenuProps}
>
{countryList.map((data,index) => (
<MenuItem
key={data.name}
value={data}
>
{data.name}
</MenuItem>
))}
</Select>
<p className="text-black">{selectedCountry.name}</p>
<p className="text-black">{JSON.stringify(selectedCountry, null, 2)}</p>
如您所见，下面的蓝色背景颜色文本显示了我选择的国家，但在选中框中没有显示。不知道我在哪里做错了。谢谢你帮忙推进。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-12 20:24:32
您的useState钩子有一个名为setSelectedCountry的set函数，但是在handleChangeCountry上，您尝试使用不根据所提供的代码更新selectedCountry的setCountryValue，请按如下方式更改它：
const [selectedCountry, setSelectedCountry] = useState({});
const handleChangeCountry = (event) => {
setSelectedCountry(event.target.value);
};而且，selectedCountry似乎应该是一个对象吗？在这种情况下，请尝试将Select作为selectedCountry.name传递
<Select
labelId="country-label"
id="country"
value={selectedCountry.name}
onChange={handleChangeCountry}
MenuProps={MenuProps}
>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71451768
复制相关文章
相似问题
腾讯云开发者
