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

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

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

【问题讨论】:

  • 我对您的代码进行了一些更改,如下面的回答中所述,并且在我这边工作正常,如果这没有帮助,我可以将整个 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);
}

然后运行你的代码。

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-09-30
    • 1970-01-01
    • 2014-10-01
    • 1970-01-01
    • 2021-11-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多