javascript Antd选择值标签

mwg9r5ms 于 2023-05-21 发布在 Java

关注(0)|答案(2)|浏览(137)

我有我的状态只有id的加载选择

//ComponentDidMount method
let countries_data = await axios.get('/api/v1/countries/');
countries_data.data.map((data) => {
  countries.push(<Option key={data.id}>{data.name}</Option>);
});
//My Options are a Option Component

//Render method
<Select 
 showSearch
 placeholder={'Country'}
 size={"large"}
 value={this.state.country_id} //Should show the text from option selected
 onChange={this.onChangeCountry}
 filterOption={(input, option) =>
     option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
     {countries}
 </Select>

这里的主要问题是我设置了一个整数值选项，选择将显示数字，如27，40，但没有国家标签，如国家A，国家B等。我这里的问题是如何设置一个值设置为整数的值，并显示我的国家数组中选择的选项？

JavaScript

来源：https://stackoverflow.com/questions/57813251/antd-select-value-label

2条答案

按热度按时间

0s7z1bwu1#

您需要将value属性添加到<Option />

countries_data.data.map((data) => {
  countries.push(<Option key={data.id} value={data.id}> {data.name} </Option>);
//                                     ^^^^^^^^^^^^^^^
});

赞(0）回复(0）举报 2023-05-21

gtlvzcf82#

参考Select.Option API，title属性设置了Select的标题。
此外，为什么要使用没有返回值的map？在这种情况下使用forEach。

countries_data.data.forEach((data) => {
  countries.push(<Option key={data.id} value={data.name} title={data.name}>{data.name}</Option>);
});

赞(0）回复(0）举报 2023-05-21

我来回答

javascript Antd选择值标签

2条答案

相关问题

热门标签

最新问答