Mapbox SearchBox组件Windows端点击建议无响应求解决方案

针对Windows系统下SearchBox组件鼠标点击建议项无法触发onRetrieve事件、仅回车键有效的问题，可尝试以下几种解决办法：

方法1：替换onRetrieve为onSelect事件 #

组件API中的onSelect事件会在用户通过鼠标点击或回车键选择建议项时触发，兼容性更稳定。修改代码如下：

<SearchBox 
    accessToken={MAPBOX_ACCESS_TOKEN} 
    value={address} 
    onChange={setAddress} 
    onSelect={(res) => console.log("Selected", res)}
/>

方法2：手动监听建议项点击并调用检索方法 #

如果onSelect仍不生效，可通过ref获取SearchBox实例，手动监听建议列表的点击事件，触发检索操作：

import { useRef, useEffect, useState } from 'react';
import { SearchBox } from '@mapbox/search-js-react';

function AddressSearch() {
  const [address, setAddress] = useState('');
  const searchBoxRef = useRef(null);

  useEffect(() => {
    const suggestionList = document.querySelector('.mapbox-suggestion-list');
    if (!suggestionList) return;

    const handleClick = (e) => {
      const suggestionItem = e.target.closest('.mapbox-suggestion');
      if (suggestionItem && searchBoxRef.current) {
        const suggestion = JSON.parse(suggestionItem.dataset.suggestion);
        searchBoxRef.current.retrieve(suggestion).then(res => {
          console.log("Selected", res);
          setAddress(res.features[0].place_name);
        });
      }
    };

    suggestionList.addEventListener('click', handleClick);
    return () => suggestionList.removeEventListener('click', handleClick);
  }, []);

  return (
    <SearchBox 
      ref={searchBoxRef}
      accessToken={MAPBOX_ACCESS_TOKEN} 
      value={address} 
      onChange={setAddress}
    />
  );
}

方法3：升级组件至最新版本 #

该问题大概率是组件旧版本的Windows兼容性bug，尝试升级@mapbox/search-js-react到最新稳定版：

npm update @mapbox/search-js-react
# 或
yarn upgrade @mapbox/search-js-react

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