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

这是使用React钩子对Vadim Gremyachev的答案的更新实现：

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 2

在google-maps-react库中实现InfoWindow component的方式不支持将事件处理程序附加到信息窗口动态内容。 this thread中讨论了类似的问题。

解决方案是将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>

Demo

如何在带有谷歌地图反应的信息窗口中添加按钮？

2 个答案: