React搜索框桌面端正常，移动端失效问题求助

问题现象 #

• 基于React实现的搜索框在本地环境、线上桌面端均正常工作
• 三款不同手机测试，移动端完全失效
• 尝试将onChange替换为onKeyDown，问题未解决
• 技术栈：React + Vite

相关代码片段 #

/* Search */
const [ searchActive, setSearchActive ] = useState(false)
const [ searchQuery, setSearchQuery ] = useState('')

// 存在语法错误
useEffect(() => { setSearchActive(searchQuery !== ''), console.log(searchQuery) }, [searchQuery])

function handleSearchInput(event) {
    setSearchQuery(event.target.value)
}

return(
<>
<div className={ darkModeActive ? 'search-bar--dark' : "search-bar" }>
    <input 
        className={ darkModeActive ? 'search-bar__input--dark' : 'search-bar__input' } 
        type="text" 
        placeholder='Search for a country...' 
        onChange={ handleSearchInput } 
    />
</div>

<div className='country-cards'>
    {countryCards.filter((value) => {
        if(searchActive && value.name.common.toLowerCase().includes(searchQuery) && value.region === filterOptionStatus) return value
        if(searchActive && value.name.common.toLowerCase().includes(searchQuery) && filterOptionStatus === null) return value
        if(searchActive === false && value.region === filterOptionStatus) return value
        if(searchActive === false && filterOptionStatus === null) return value
    })
    .map((country) => ( 
        <Card key={ country.name.common } country={ country } darkMode={ darkModeActive } countryCards={ countryCards } />
    ))} 
</div>
</>

问题排查与修复建议 #

1. 修复useEffect语法错误 #

原代码中useEffect的回调函数写法不符合规范：箭头函数未用大括号包裹多语句，逗号运算符导致setSearchActive的执行逻辑存在异常风险，可能引发状态更新不及时。

修正后：

useEffect(() => {
  setSearchActive(searchQuery !== '');
  console.log(searchQuery);
}, [searchQuery]);

2. 简化搜索过滤逻辑 #

原过滤条件冗余且易出错，可简化为更清晰的逻辑，同时避免searchActive状态依赖带来的潜在问题：

const filteredCountries = countryCards.filter(country => {
  // 搜索匹配：无搜索词时全部匹配，统一转小写避免大小写问题
  const matchesSearch = searchQuery === '' || country.name.common.toLowerCase().includes(searchQuery.toLowerCase());
  // 地区过滤：无过滤条件时全部匹配，否则匹配对应地区
  const matchesRegion = filterOptionStatus === null || country.region === filterOptionStatus;
  // 同时满足搜索和过滤条件
  return matchesSearch && matchesRegion;
});

在JSX中替换原过滤逻辑：

<div className='country-cards'>
  {filteredCountries.map((country) => ( 
    <Card key={ country.name.common } country={ country } darkMode={ darkModeActive } countryCards={ countryCards } />
  ))}
</div>

3. 移动端额外检查点 #

• 确认输入框未被fixed定位的导航栏等元素遮挡，导致无法获取焦点
• 检查CSS是否存在pointer-events: none等禁用交互的属性
• 在handleSearchInput中打印event.target.value，确认输入值是否正确更新到状态中

内容的提问来源于stack exchange，提问作者CodeyBrodey