在桌面上工作但不在移动设备上工作的搜索栏（React）

Question

我有一个似乎无法解决的问题。我创建了一个搜索栏，它完全适用于我的本地主机以及桌面上的实时网站，但在移动设备上它不想工作。我已经在三部不同的手机上进行了测试，每部手机都存在相同的问题。

/* 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>
</>

我提供了似乎与问题相关的代码片段。所有代码都包含在一个组件中。

这里是您自己看一看的直播网站：https://rest-countries-codeybrodey.vercel.app

我的猜测是它与移动键盘有关。我也试过将 onChange 更改为 onKeyDown 但只是遇到了同样的问题。

这也是我第二次在项目中使用 React，如果这意味着什么，我第一次使用 vite。

我在这里的第一篇文章，所以请原谅任何麻烦。谢谢。

Answer 1

您在移动设备上遇到的搜索功能问题可能与移动输入字段上的 onChange 事件的行为有关。移动设备通常会在一定延迟后或输入字段失去焦点时触发输入字段的 onChange 事件。

为了解决这个问题，您可以尝试使用 onInput 事件而不是 onChange。 onInput 事件会在输入值更改时立即触发，从而在移动设备上提供更灵敏的体验。这是使用 onInput 事件的代码的更新版本：

    /* 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..."
        onInput={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>
  </>
);

通过使用

onInput

事件而不是

onChange

，搜索功能应该在移动设备上更有效地工作，当用户在搜索输入字段中键入时提供实时更新。