如何使用 Google 地图 API 和 google-maps-react V2.0.2 访问 React 中 Inf

Question

每次单击地图时，我都会尝试查看信息窗口，它将显示一个输入字段和一个将命名位置添加到列表的按钮。目前，我只是想将文本从表单中取出，我遇到的问题是单击按钮时如何访问表单???!

import React from 'react';
import ReactDOM from 'react-dom';
import PopUpForm from './PopUpForm';
import ReactDOMServer from 'react-dom/server'
class Map extends React.Component {

state = {
infowindow: new google.maps.InfoWindow({}),
}
componentDidUpdate(prevProps, prevState) {
console.log('componentDidUpdate');
if (prevProps.google !== this.props.google) {
this.loadMap();
}
}
componentDidMount() {
console.log('componentDidMount');
this.loadMap();
}
loadMap() {
console.log('loadMap');
if (this.props && this.props.google) {
// google is available
const {google} = this.props;
const maps = google.maps;
const mapRef = this.refs.map;
const node = ReactDOM.findDOMNode(mapRef);
const {initialCenter, zoom} = this.props;
const {lat, lng} = initialCenter;
const center = new maps.LatLng(lat, lng);
const mapConfig = Object.assign({}, {
center,
zoom
})
this.map = new maps.Map(node, mapConfig);
// adding markers for corresponding saved places
const pos = {lat: 59.329113196988345 , lng: 17.966015144369067};
const marker = new google.maps.Marker({
position: pos,
map: this.map,
title: 'first marker',
});
const infowindow = new google.maps.InfoWindow({
content: `<h3>${marker.title}</h3>`
});
marker.addListener('click', () => {
infowindow.open(this.map, marker);
});
// pop up  infoWindoW on map
this.map.addListener('click', (e) => {
this.state.infowindow.close();
const popUp = <PopUpForm onSubmit={this.onSubmit}/>;
this.showPopupOnMap(e.latLng, popUp);
google.maps.event.addListener(this.state.infowindow, 'domready', () => {
// HOW TO ACCESS THE FORM HERE
});
})
this.forceUpdate();
}      
}
onSubmit = () => {
e.preventDefault();
window.alert('onSubmit form')
}
showPopupOnMap = (latLng, popUp) => {
const contentString = ReactDOMServer.renderToString(popUp)
const pos = { lat: latLng.lat(), lng: latLng.lng() };
this.state.infowindow = new google.maps.InfoWindow({
content: contentString,
position: pos
});
this.state.infowindow.open(this.map)
}
renderChildren() {
console.log('renderChildren');
const {children} = this.props;
if (!children) return;
return React.Children.map(children, c => {
return React.cloneElement(c, {
map: this.map,
google: this.props.google,
});
})
}
render() {
console.log('render');
const style = {
width: '70vw',
height: '70vh'
}
return (
<div  ref="map" style={style}>
loading map...
{this.renderChildren()}
</div>
)
}
};
Map.defaultProps = {
zoom: 11,
initialCenter: {
lat: 59.3293,
lng: 18.0686
}
}
export default Map;

import React from 'react';
class PopUpForm extends React.Component {
render() {
return (
<div id='iwc' ref='iwc' >
<b>Add this location</b><br />
<form ref='mapform' className='map-form' onSubmit={this.onSubmit}>
<input type='text' />
<button id='btn'>Add</button>
</form>
</div>
);
}
}
export default PopUpForm;

在 this.map.addListner(this.state.infoWindow， 'domready'， someFunctionToBeCalled( 我不知道如何在 React 中访问表单，我搜索了一下我能找到的就是这个：

google.maps.event.addListener(info, 'domready', function() {
document.id("map-form").addEvent("submit", function(e) {
e.stop();
console.log("hi!");
});
});

这可能吗？我错过了什么吗？？

Answer 1

我找到了解决这个问题的简单方法：

google.maps.event.addListener(this.state.infowindow, 'domready', () => {
document.getElementById('popUp').addEventListener('submit', (e) => {
e.preventDefault();
console.log(e.target.elements.location.value);
})
});