国家/地区使用材料界面选择菜单

Question

我通过一个带有国家名称的字符串数组进行映射，通过它进行映射，以获得表单中所有国家的下拉菜单列表，但select下拉菜单不起作用。。我做错什么了吗？

<FormControl fullWidth style={{ marginTop: "1.2rem" }}>
<InputLabel variant="standard" htmlFor="uncontrolled-native">
Select A Country
</InputLabel>
<NativeSelect
defaultValue={1}
inputProps={{
name: "country",
id: "uncontrolled-native",
}}
>
{countryList.map((country, index) => {
<option value={index + 1} key={index}>
{country}
</option>;
})}
</NativeSelect>
</FormControl>

Answer 1

我认为问题是你在地图中错过了返回，你应该这样使用它：

{countryList.map((country, index) => {
return <option value={index + 1} key={index}>
{country}
</option>;
})}

或者你可以试试我的完整代码：

<FormControl fullWidth style={{ marginTop: "1.2rem" }}>
<InputLabel variant="standard" htmlFor="uncontrolled-native">
Select A Country
</InputLabel>
<NativeSelect defaultValue={1} inputProps={{
name: "country",
id: "uncontrolled-native"}}>
{countryList.map((country, index) => {
return <option value={index + 1} key={index}>
{country}
</option>;
})}
</NativeSelect>
</FormControl>