Как добавить кнопку в информационном окне с помощью google-maps-реакции?

Question

Я хочу добавить кнопку в мое информационное окно.Появляется, и я могу щелкнуть по нему, но он не вызывает onClick.

Это подробный текст для поста, я не думаю, что могу больше объяснить это. Это подробный текст для поста, я не думаю, что могуподробнее объясните это. Это подробный текст для поста, я не думаю, что смогу больше объяснить это.

Мой код:

export class MapPage extends Component {
  state = {
    activeMarker: {},
    selectedPlace: {},
    selectedText: {},
    selectedId: {},
    showingInfoWindow: false
  };

  send = () => {

      console.log('fzf');

}    

  onMarkerClick = (props, marker) => {
    this.setState({
      activeMarker: marker,
      selectedPlace: props,
      selectedText: props,
      selectedId: props,
      showingInfoWindow: true
    });  
  };

  onInfoWindowClose = () =>
    this.setState({
      activeMarker: null,
      showingInfoWindow: false
    });

  onMapClicked = () => {
    if (this.state.showingInfoWindow)
      this.setState({
        activeMarker: null,
        showingInfoWindow: false
      });
  };

  handleClick = () => {
    this.setState({ open: true });
  };

  handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }

    this.setState({ open: false });
  };

  render() {
    const { classes } = this.props;


    return (
      <div>
        <Map google={this.props.google} 
             onClick={this.onMapClicked}
             zoom={13} 
             initialCenter={{
             lat: 48.724865087482755,
             lng: -3.4469044744779467
                          }}
        >

         <Marker>
          name='Paris'
          onClick={this.onMarkerClick}
          position={{ lat: 48, lng: -3 }}
        />

        <InfoWindow
          marker={this.state.activeMarker}
          onClose={this.onInfoWindowClose}
          visible={this.state.showingInfoWindow}>
          <div>
            <h2>{this.state.selectedPlace.name}</h2>
            <p>{this.state.selectedPlace.description}</p>
            <button type="button" onClick={this.send}>Click Me</button>

          </div>
        </InfoWindow>
        </Map>
        </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ('APIKEY')
})(MapPage)

Answer 1

Способ реализации компонента InfoWindow в библиотеке google-maps-react не поддерживает присоединение обработчиков событий к динамическому содержимому информационного окна .Подобная проблема обсуждалась в этой теме .

Решением будет рендеринг дочерних элементов InfoWindow в узел DOM , чтобы предотвратить потерю контекста React, для этого может быть введен следующий компонент:

export default class InfoWindowEx extends Component {
  constructor(props) {
    super(props);
    this.infoWindowRef = React.createRef();
    this.contentElement = document.createElement(`div`);
  }

  componentDidUpdate(prevProps) {
    if (this.props.children !== prevProps.children) {
      ReactDOM.render(
        React.Children.only(this.props.children),
        this.contentElement
      );
      this.infoWindowRef.current.infowindow.setContent(this.contentElement);
    }
  }

  render() {
    return <InfoWindow ref={this.infoWindowRef} {...this.props} />;
  }
}

Теперь, когда InfoWindow заменен на InfoWindowEx, обработчики событий могут быть присоединены к дочерним компонентам:

<InfoWindowEx
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}>
        <button type="button" onClick={this.showDetails}>
            Show details
        </button>
</InfoWindowEx>

Демо