如何在 react-google-maps/api 的 InfoWindow 內容中觸發 function 按鈕 onClick？

Question

我正在嘗試在位於 infoWindow 元素中的按鈕 onClick 上觸發 function reportPost() 。 當我單擊標記圖標並且 infoWindow 開始呈現時，function 會自行觸發，當 window 已經加載時，按鈕不起作用（無法觸發功能）。 我怎樣才能防止這種情況並修復按鈕？

import { useState, useEffect, useCallback } from "react";
import {
  GoogleMap,
  useJsApiLoader,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";
import Axios from "axios";

import markerIcon from "../images/markerIcon.png";

const containerStyle = {
  width: "100%",
  height: "100%",
};

const options = {
  mapId: process.env.MAP_ID,
  streetViewControl: false,
};

const center = {
  lat: 52.22611704066942,
  lng: 19.357910156250004,
};

function Map() {
  const [markers, setMarkers] = useState([]);

  useEffect(() => {
    Axios.get("http://localhost:3001/api/markers").then((response) => {
      setMarkers(response.data);
    });
  }, []);

  function reportPost(markerid) {
    console.log(markerid);
  }

  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
  });

  const onLoad = useCallback(function callback(map) {
    setMap(map);
  }, []);

  const onUnmount = useCallback(function callback(map) {
    setMap(null);
  }, []);

  const [map, setMap] = useState(null);

  const [activeMarker, setActiveMarker] = useState(null);

  const handleActiveMarker = (marker) => {
    setActiveMarker(marker);
  };

  return isLoaded ? (
    <div className="w-100 h-hero flex">
      <GoogleMap
        mapContainerStyle={containerStyle}
        options={options}
        center={center}
        zoom={6}
        onLoad={onLoad}
        onUnmount={onUnmount}
      >
        {markers.map(
          (
            { markerid, latitude, longitude, description },
            i,
            arr
          ) => {
            const position = {
              lat: latitude,
              lng: longitude,
            };

            return (
              <Marker
                key={markerid}
                icon={markerIcon}
                position={position}
                onClick={() => handleActiveMarker(markerid)}
              >
                {activeMarker === markerid ? (
                  <InfoWindow
                    onCloseClick={() => setActiveMarker(null)}
                  >
                      <div>
                          <div>
                            {description}
                          </div>
                        <div>
                          <button
                            onClick={reportPost(markerid)}
                          >
                            Report Post
                          </button>
                        </div>
                      </div>              
                  </InfoWindow>
                ) : null}
              </Marker>
            );
          }
        )}
      </GoogleMap>
    </div>
  ) : null;
}

export default Map;

Answer 1

我認為 onclick 需要回調，您可以嘗試這樣做：

<button onClick={() => reportPost(markerid)}>
    Report Post
</button>