时间戳

首页 > 解决方案 > 如何使用 google-maps-react 在信息窗口中添加按钮？

reactjs - 如何使用 google-maps-react 在信息窗口中添加按钮？

问题描述

我想在我的信息窗口中集成一个按钮。它出现了，我可以点击它，但它不会触发 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)

标签： reactjs

解决方案

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>

演示

推荐阅读