Как получить доступ к форме внутри содержимого InfoWindow в React, используя API-интерфейсы Google Maps и Google-Maps-реаги V2.0.2

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);
          })
        });