我正在尝试使用react-autocomplete库创建一个自动完成选择框。呈现该字段并输入查询时,我无法选择前两个建议的选项。更具体地说,除非单击第三项以上的建议,否则我传递给组件的onSelect
函数不会触发。
这是我的相关代码:
class Example extends React.Component {
constructor() {
super();
this.state = {
value: '',
userSuggestions: []
}
this.handleUserAutocompleteChange = this.handleUserAutocompleteChange.bind(this);
this.getUserAutocompleteSuggestions = this.getUserAutocompleteSuggestions.bind(this);
this.handleUserAutocompleteSelect = this.handleUserAutocompleteSelect.bind(this);
}
handleUserAutocompleteChange(event) {
console.log('[handleUserAutocompleteChange]', event.target.value);
this.getUserAutocompleteSuggestions(event.target.value)
this.setState({ value: event.target.value });
}
handleUserAutocompleteSelect(value, item) {
console.log('[handleUserAutocompleteSelect]', value, item);
this.setState({ value })
}
getUserAutocompleteSuggestions(value) {
console.log('[getUserAutocompleteSuggestions]', value)
return getUserAutocomplete(this.props.account.details.token, value)
.then(users => {
this.setState({ userSuggestions: users.map(user => ({
first_name: user.first_name,
last_name: user.last_name,
id: user.id + '',
email_id: user.email_id
}))});
})
.catch(console.error);
}
render() {
return (
<Autocomplete
getItemValue={user => user.id}
items={this.state.userSuggestions}
onChange={this.handleUserAutocompleteChange}
onSelect={this.handleUserAutocompleteSelect}
renderItem={this.getRenderItem}
value={this.state.value}
/>
);
}
}
对于自动完成选择框的任何解决方案或更好的建议,我们深表感谢。