Question

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

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

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

并运行您的代码。

我尝试这样做，这样可以正常工作。希望这对您有所帮助。

在选择的下拉菜单项上隐藏自动完成建议列表，然后单击

1 个答案: