无法选择“反应-自动完成”选择框的前两个结果

时间:2018-08-20 17:49:28

标签: javascript reactjs

我正在尝试使用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}
            />
        );
    }
}

对于自动完成选择框的任何解决方案或更好的建议,我们深表感谢。

0 个答案:

没有答案