Javascript 自定义typeahead组件未捕获选择-反应

我正在尝试在React中构建自定义的typeahead组件，但是在捕获所选项目时遇到了问题。当

输入

元素处于

焦点

时，我会用一个下拉列表（

div

和

id=“autocompleteResultsContainer”

）显示结果，每当它处于

模糊

模式时，下拉列表就会从视图中删除。当我单击下拉组件时（这是与

输入

分离的元素，

单击

事件不会被捕获，下拉组件也会从视图中删除。如何在结果容器中捕获

单击

事件？我尝试使用

设置超时

，但这并不理想，因为它会在结果之前造成明显的延迟是隐藏的，或者在用户按住单击键时不处理任何情况。如果可能，我还希望避免在整个应用程序中添加事件侦听器

showAutocompleteResults(showAutocompleteResults) {
    this.setState({ showAutocompleteResults: showAutocompleteResults })
}

<div id="autocompleteContainer">
   <input type="text" onKeyUp={(event) => this.getDropdownValues(event)} onFocus={() => this.showAutocompleteResults(true)} onBlur={() => this.showAutocompleteResults(false)} placeholder="Search for tags"></input>
    {this.state.showAutocompleteResults
         ? <ul id="autocompleteResultsContainer">
           {this.state.autocompleteResults.map((r) => (
               <li key={r + "DropdownItem"} onClick={(event) => this.handleDropdownTagSelection(event)}>{r}</li>
           ))}
       </ul>
     : null}
<div>

showAutocompleteResults（showAutocompleteResults）{
this.setState（{showAutocompleteResults:showAutocompleteResults}）
}
this.getDropdownValues（event）}onFocus={（）=>this.showAutocompleteResults（true）}onBlur={（）=>this.showAutocompleteResults（false）}placeholder=“搜索标记”>
{this.state.showcompleteresults
？

{this.state.autocompleteResults.map（（r）=>(
this.handleDropdownTagSelection（事件）}>{r}
))}

：null}