Как добавить кнопку в информационном окне с помощью 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 class InfoWindowEx extends Component {
  constructor(props) {
    super(props);
    this.infoWindowRef = React.createRef();
    this.onInfoWindowOpen = this.onInfoWindowOpen.bind(this);
    if (!this.containerElement) {
      this.containerElement = document.createElement(`div`);
    }
  }

  onInfoWindowOpen() {
    ReactDOM.render(React.Children.only(this.props.children), this.containerElement);
    this.infoWindowRef.current.infowindow.setContent(this.containerElement);
  }
  render() {
    return <InfoWindow onOpen={this.onInfoWindowOpen} 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>

демонстрация

Answer 2

Вот обновленная реализация ответа Вадима Гремячева с использованием перехватчиков React:

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { InfoWindow } from "google-maps-react";

export default function InfoWindowEx(props) {
  const infoWindowRef = React.createRef();
  const contentElement = document.createElement(`div`);
  useEffect(() => {
    ReactDOM.render(React.Children.only(props.children), contentElement);
    infoWindowRef.current.infowindow.setContent(contentElement);
  }, [props.children]);
  return <InfoWindow ref={infoWindowRef} {...props} />;
}

Реализация JSX осталась прежней:)

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

Ура!

Answer 3

Вы можете просто использовать <a href="/to-your-desired-page"