在反应自动完成中自动选择第一个匹配项

时间:2020-03-17 13:14:40

标签: reactjs debugging autocomplete highlight onselect

我正在使用https://www.npmjs.com/package/react-autocomplete

我遇到的问题与

中提出的问题相同
https://github.com/reactjs/react-autocomplete/issues/239

经过一番阅读之后,我才知道有一种选择

https://github.com/reactjs/react-autocomplete/issues/266

请告知默认情况下如何选择列表中的第一项,以便用户可以按Enter键,它将选择列表中的第一项

我当前的实现如下所示

<Autocomplete
                    ref={el => this.input = el}
                    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 })
                    }
                    onSelect={(value) => this.onSelectSRN({ value })}
                    renderItem={(item, isHighlighted) =>
                        <div className= "menu" style={{ background: isHighlighted ? '#e1e1e1' : 'white' }} key={item.name}>
                            {item.name}
                        </div>
                    }
                />

0 个答案:

没有答案