我正在嘗試構建一個應用程式，您可以通過單擊導航項來切換效果。
在導航專案上，我有一個切換狀態的事件監聽器
const [marker, setMarker] = useState(false);
onClick={() => setMarker(!marker)}
這個想法是當它設定為true時，你可以點擊地圖來設定一個航點。當它為假時，單擊會執行默認行為。
我嘗試使用這樣的 if 陳述句
if (marker) {
map.current.on('click', (e) => {
new mapboxgl.Marker().setLngLat(e.lngLat).addTo(map.current);
// Create a new marker.
});
}
無論狀態是真還是假，您仍然可以在第一次切換后放置一個航點。
有人可以告訴我我在這里缺少什么嗎？我知道這很愚蠢。
uj5u.com熱心網友回復：
當我開始使用 React Hooks 時，我也遇到了同樣的問題！不用擔心，那是因為您沒有洗掉為Ref添加的click事件的代碼！map所以你只需要清理click地圖物件的事件！
useEffect(() => {
function clickHandler(e) {
new mapboxgl.Marker().setLngLat(e.lngLat).addTo(map.current);
// Create a new marker.
}
if (marker) {
map.current.on('click', (e) => {
clickHandler(e)
});
}
return () => {
map.current.removeEventListener('click', clickHandler)
}
}, [marker]);
請嘗試這種方式..祝你好運..
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/479160.html
標籤：javascript 反应 地图框 使用效果 使用状态