做搜索框的历史记录时遇到的问题
在构建搜索框的历史记录时,您可能遇到了以下问题:
- 问题一: 点击历史记录项会触发输入框失焦,导致历史记录无法正常显示。
- 问题二: 清除输入框时也会触发失焦,从而导致搜索框不符合设计要求。
解决方案:
问题一:
- 使用一个容器元素将输入框和历史记录列表包裹起来。
- 添加一个“点击外部区域关闭历史记录”的事件监听器。
问题二:
- 在清除按钮的点击事件中控制历史记录列表的显示状态。
更好的方法:
摒弃对失焦事件的依赖,而是使用以下方法:
- 在容器元素上设置一个ref,以便在点击事件中引用它。
- 使用useeffect监听点击外部区域事件,并在容器元素外部点击时关闭历史记录。
- 使用usestate管理历史记录的显示状态,并在相关操作(例如点击历史记录项或清除输入框)中更新该状态。
示例代码(react):
import React, { useRef, useState, useEffect } from 'react'; const options = [ { id: 1, name: '1' }, { id: 2, name: '2' }, ]; const App = () => { const contAInerRef = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const onClickOutside = (event) => { if ( containerRef.current && !containerRef.current.contains(event.target) ) { setVisible(false); } }; document.addEventListener('mousedown', onClickOutside); return () => { document.removeEventListener('mousedown', onClickOutside); }; }, [containerRef]); const onFocus = () => { console.log('onFocus'); setVisible(true); }; const onClick = () => { // 手动关闭历史记录,不受失焦事件的影响 setVisible(false); }; return ( <div ref="{containerRef}"> <input type="text" onfocus="{onFocus}"><button onclick="{()"> setVisible(false)}>clean</button> <ul style="{{" display: visible :> {options.map((item) => ( <li classname="item" onclick="{onClick}" key="{item.id}"> {item.name} </li> ))} </ul> </div> ); }; export default App;
登录后复制
通过采用这些解决方案,您可以在构建搜索框历史记录时避免上述问题,并实现更流畅的用户体验。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容