在选择下拉项上隐藏自动完成建议列表并输入单击

【问题标题】：Hide autocomplete suggestion list on select dropbdown item and enter click在选择下拉项上隐藏自动完成建议列表并输入单击
【发布时间】：2019-10-07 11:57:15
【问题描述】：

我已经创建了自动完成建议输入字段，带有去抖动挂钩，只剩下一个问题，当我选择项目或点击外部时关闭下拉菜单？什么是显示所选项目的最佳解决方案，在创建一些“redableRenderValue”时将其显示在输入值中。

当前行为：当我点击进入或项目本身时，下拉关闭并再次重新打开预期值：关闭时模糊，关闭时输入和关闭选择项 https://codesandbox.io/s/usedebounce-ncq2n

【问题讨论】：

Detect click outside React component的可能重复
我对您的代码进行了一些更改，如下面的回答中所述，并且在我这边工作正常，如果这没有帮助，我可以将整个 index.js 文件分享给您，那么您可以制作一个试试看。

标签： javascript reactjs

【解决方案1】：

试试这个：

const [showSuggestions, setShowSuggestions] = useState(true); //make useState initial value to true instead of false.

并且，从useEffect删除下面的代码

setShowSuggestions(true); //delete this line from your code

这里也改一下：

<input
    type="text"
    placeholder="Find"
    onChange={e => setSearchTerm(e.target.value)}
    onClick={onInputClick} //add this attribute
    onKeyDown={onKeyDown}
    // onBlur={onBlur}
    value={searchTerm}
    autoFocus
/>

以及要调用的相应函数：

const onInputClick = () =>{
    setShowSuggestions(true);
}

然后运行你的代码。

我试试看，这样做会很好。希望这对您有所帮助。

【讨论】：