时间戳

首页 > 解决方案 > 在选择下拉项上隐藏自动完成建议列表并输入单击

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

问题描述

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

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

标签： javascriptreactjs

解决方案

尝试这个：

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);
}

并运行您的代码。

我试试看，这样做会很好。希望这会帮助你。

推荐阅读