Question

我正在使用react-google-maps制作一个带有显示InfoWindows的标记的地图，您可以在其中按下按钮以将某些内容打印到控制台。我使用以下代码，但是onClick不会执行该功能：

function Map() {

  const [selectedKalas, setSelectedKalas] = useState(null);
  const [data, setData] = useState({ hits: [] });

  function sendMergeRequest() {
    console.log("Sender merge request");
  };

  /* Fetching some data... */

   useEffect(() => {
    const fetchData = async () => {
      const result = await axios(database_url_coordinates);
      setData(result);
    };
    fetchData();
  }, []);

  return (
    <GoogleMap>
      {
        data.data.map(kalasobjekt => {
          if (kalasobjekt.username !== "admin" && kalasobjekt.kalas !== null) {
            return (
                  <Marker
                    key={kalasobjekt.kalas.id}
                    position={{
                      lat: parseFloat(kalasobjekt.kalas.lat),
                      lng: parseFloat(kalasobjekt.kalas.lng)
                    }}
                    onClick={() => {
                      setSelectedKalas(kalasobjekt);
                    }}
                  />
                )}
            );
          }
        }))
      }
      {selectedKalas && (
        <InfoWindow
          position={{
            lat: parseFloat(selectedKalas.kalas.lat),
            lng: parseFloat(selectedKalas.kalas.lng)
          }}
          onCloseClick={() => {
            setSelectedKalas(null);
          }}
        >
              <div>
                <h2>{selectedKalas.username}</h2>
                <p>Eier: {selectedKalas.kalas.fullName}</p>
                <p>Kapasitiet: {selectedKalas.kalas.capacity}</p>
                <div className="submitData">
                  <button onClick={sendMergeRequest}>
                    Merge hos {selectedKalas.username}!
                  </button>
                </div>
              </div>

        </InfoWindow>
      )}
    </GoogleMap>
  );
}

我一直在寻找并试图理解为什么这行不通，但似乎找不到任何好的答案。我希望

Answer 1

尝试这样的事情：

function Hello() {
    const handleClick = function handle(){
        alert('Btn is clicked');
    }

  return (
        <div>
            <button onClick={ handleClick }>Click Me</button>
        </div>
    )
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

工作fiddle

Answer 2

我认为将此功能 SendMergeRequest 方法保留在功能地图之外应该可以。

示例：

function Map() {
// map code
}

function SendMergeRequest() {
  console.log("Sender merge request");
};

React OnClick内部无状态功能不起作用

2 个答案: