在github用户示例之后,我在loadOptions中有以下getCodes函数。 promise中返回的选项在获取调用后有效。但是,问题是下拉菜单没有显示这些选项,只是说“键入搜索”。
getCodes(input) {
if (!input) {
return Promise.resolve({
options: [
{label: 'Delhi', value: 'DEL'},
{label: 'Mumbai', value: 'MUM'}
]
});
}
const url = 'http://iatacodes.org/api/v6/autocomplete?query=' + input + '&api_key=' + KEY;
var proxyUrl = 'https://cors-anywhere.herokuapp.com/';
return fetch(proxyUrl+url)
.then((response) => {
return response.json();
}).then((json) => {
var options = [];
_.each(json['response']['airports'], (airport) => {
options.push({
label: airport['name'],
value: airport['code']
})
});
console.log(options);
return options;
});
}
fromLocChange(o) {
this.setState({...this.state, fromLoc: o.value});
}
<Select.Async
name="form-field-name"
className="selector"
valueKey="value"
labelKey="name"
value={this.state.fromLoc}
onChange={this.fromLocChange}
clearable={false}
loadOptions={this.getCodes}
/>
输出上面的console.log用于搜索字词&#39; JAI&#39;是:
[
{label: "Sanganeer", value: "JAI"},
{label: "Jaisalmer", value: "JSA"}
]
选择器的屏幕截图: