React Autocomplete小部件从下拉菜单中的键导航上选择项目

Question

我正在使用React Autocomplete

https://www.npmjs.com/package/react-autocomplete

如下所示工作正常

 <Autocomplete
                    value={this.state.value}
                    inputProps={inputProps}
                    wrapperStyle={{ position: 'absolute', display: 'inline-block' }}
                    items={this.state.srnList}
                    getItemValue={item => item.name}
                    shouldItemRender={matchSRN}
                    onChange={(event, value) =>
                        this.setState({ value, loading: false })
                    }
                    onSelect={this.onSelectFunc}
                    renderMenu={(items, value) => (
                        <div className="menu">
                            {items.length < 1 ? (
                                <div className="item">loading ...</div>
                            ) : items}
                        </div>
                    )}

                    renderItem={(item, isHighlighted) => (
                        <div
                            className={`item ${isHighlighted ? 'item-highlighted' : ''}`}
                            key={item.code} >
                            <a href={'/InstallBase/sitePage/' + item.name.split(',')[0]}>{item.name}</a>
                        </div>
                    )}
                />

在上述实现中，部分项目在单击菜单项时发生

想知道如何在按键导航中选择项目，或者在输入时选择菜单下方列表显示中的第一个匹配项目

Answer 1

已删除renderMenu函数按预期工作