Antd 选择值标签

Question

我的状态只有 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 等。我的问题是如何设置value 将值设置为整数并显示从我的国家/地区数组中选择的选项？

Answer 1

您需要将

value

属性添加到您的

<Option />

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

Answer 2

参考

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>);
});