（反应）在谷歌地图标记点击打开一个模式

Question

更新：添加了 Dandy's 如果我将 this 绑定到 componentDidMount，我现在可以访问 componentDidMount 中的 this.setState 函数，但是因为 this.setState 在 componentDidMount 中，所以 this.setState 不是函数。

我想我必须在 componentDidMount 之外构建地图，但我现在不确定从哪里开始

原文：

所以我在 React 中构建了一个谷歌地图，我想在标记点击时打开一个模式。

我的渲染中有模态框，并且

marker.addListener('click', function() {
          infowindow.open(map, marker);
          this.setState({ showModal: true });
        });

在 componentDidMount 中，但我发现我无法更改 componentDidMount 中的状态...关于如何让我的模态显示在标记点击上的任何建议？

import React from 'react';
import {Link} from 'react-router';
import {
    Row,
    Col,
    FormGroup,
    ControlLabel,
    FormControl,
    Button,
    Grid,
    Modal,
    Popover,
    Tooltip,
    OverlayTrigger
} from 'react-bootstrap';

export class Maps extends React.Component {
    constructor(props) {
        super(props);
            userPosition: {lat: 40.7128, lng: -74.0059},
            defaultCenter: {
                lat: 40.7128,
                lng: -74.0059
            },
            showModal: false,
        };
        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
        this.componentDidMount = this.componentDidMount.bind(this);
    }

    close() {
        this.setState({ showModal: false });
      }

    open() {
        this.setState({ showModal: true });
      }
  
    componentDidMount() {
        // this.getCurrentPosition();
        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">New York</h1>'+
            '<div id="bodyContent">'+
            '<p>content string</p>'+
            '</div>'+
            '</div>';

        let sourland = {lat: 40.473927, lng: -74.694482};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {
                lat: 40.7128,
                lng: -74.0059
            }
        });

        var infowindow = new google.maps.InfoWindow({
          content: contentString,
          maxWidth: 200
        });

        var marker = new google.maps.Marker({
          position: sourland,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });

        // modal code
        marker.addListener('click', function() {
          infowindow.open(map, marker);
          this.setState({ showModal: true });
        });
    }


    render(){
        console.log(this.state);

        const popover = (
          <Popover id="modal-popover" title="popover">
            very popover. such engagement
          </Popover>
        );
        const tooltip = (
          <Tooltip id="modal-tooltip">
            wow.
          </Tooltip>
        );

        return (
            <div>
                <div id="map" className="map-container"></div>

                <Button
                  bsStyle="primary"
                  bsSize="large"
                  onClick={this.open}
                >
                  Launch demo modal
                </Button>

                <Modal show={this.state.showModal} onHide={this.close}>
                  <Modal.Header closeButton>
                    <Modal.Title>Sourland Mountain Preserve Climbs</Modal.Title>
                  </Modal.Header>
                  <Modal.Body>
                    <h4>Sourland Mountain Preserve</h4>
                    <p>Climbing is allowed in blank, but watch out for blank.</p>

                    <h4>This is a Popover</h4>
                    <p>there is a <OverlayTrigger overlay={popover}><a href="#">popover</a></OverlayTrigger> here</p>

                    <h4>Tooltips in a modal</h4>
                    <p>there is a <OverlayTrigger overlay={tooltip}><a href="#">tooltip</a></OverlayTrigger> here</p>
                  </Modal.Body>
                  
                  <Modal.Footer>
                    <Button onClick={this.close}>Close</Button>
                  </Modal.Footer>
                </Modal>
            </div>
        );
    }
}

Answer 1

在实现 Dandy 的构造函数修复后，我使用 Daniel Andrews's ES6 React GMap Component 帖子作为参考在 ES6 中重写了地图组件。

因为这个组件在 Meteor 1.4 应用程序中使用，我不得不使用严格的 ES6（没有 ES5 或 ES7+，如 Andrews 示例）

export class Maps extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        userPosition: {lat: 40.7128, lng: -74.0059},
        defaultCenter: {
            lat: 40.7128,
            lng: -74.0059
        },
        zoom: 10,
        showModal: false,
    };
    this.close = this.close.bind(this);
    this.open = this.open.bind(this);
}

componentDidMount() {
  this.map = this.createMap()
  this.marker = this.createMarker()
  this.infoWindow = this.createInfoWindow()

  google.maps.event.addListener(this.map, 'zoom_changed', ()=> this.handleZoomChange())

  google.maps.event.addListener(this.marker, 'click', ()=> this.handleMarkerClick())
}

componentDidUnMount() {
  google.maps.event.clearListeners(map, 'zoom_changed')
}

createMap() {
  let mapOptions = {
    zoom: this.state.zoom,
    center: this.mapCenter()
  }
  return new google.maps.Map(this.refs.mapCanvas, mapOptions)
}

mapCenter() {
  return new google.maps.LatLng(
    this.state.defaultCenter.lat,
    this.state.defaultCenter.lng
  )
}

createMarker() {
  return new google.maps.Marker({
    position: this.mapCenter(),
    map: this.map
  })
}

createInfoWindow() {
  let contentString = "<div class='InfoWindow'>I'm a Window that contains Info Yay</div>"
  return new google.maps.InfoWindow({
    map: this.map,
    anchor: this.marker,
    content: contentString
  })
}

handleMarkerClick(){
    console.log("ow");
    this.setState({
      showModal: true
    });
    this.infowindow.open(map, marker);
}

handleZoomChange() {
  this.setState({
    zoom: this.map.getZoom()
  })
}

close() {
    this.setState({ showModal: false });
  }

open() {
    this.setState({ showModal: true });
  }

  render() {

    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = (
      <Tooltip id="modal-tooltip">
        wow.
      </Tooltip>
    );

    return <div>
    <div className="GMap">
      <div className='UpdatedText'>
        <p>Current Zoom: { this.state.zoom }</p>
      </div>
      <div className='GMap-canvas' ref="mapCanvas">
      </div>
    </div>

      <Modal show={this.state.showModal} onHide={this.close}>
        <Modal.Header closeButton>
          <Modal.Title>Sourland Mountain Preserve Climbs</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Sourland Mountain Preserve</h4>
          <p>Climbing is allowed in blank, but watch out for blank.</p>

          <h4>This is a Popover</h4>
          <p>there is a <OverlayTrigger overlay={popover}><a href="#">popover</a></OverlayTrigger> here</p>

          <h4>Tooltips in a modal</h4>
          <p>there is a <OverlayTrigger overlay={tooltip}><a href="#">tooltip</a></OverlayTrigger> here</p>

          <hr />

        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.close}>Close</Button>
        </Modal.Footer>
      </Modal>
    </div>
  }

}

Answer 2

从您的代码来看，您似乎没有在构造函数中正确设置状态。结果，“showModal”的状态不可访问/不存在。

确保您的构造函数已配置为设置组件的状态：

变化：

constructor(props) {
    super(props);
        userPosition: {lat: 40.7128, lng: -74.0059},
        defaultCenter: {
            lat: 40.7128,
            lng: -74.0059
        },
        showModal: false,
    };

进入这个：

constructor(props) {
    super(props);
    this.state = { 
        userPosition: {lat: 40.7128, lng: -74.0059},
        defaultCenter: {
            lat: 40.7128,
            lng: -74.0059
        },
        showModal: false
    }
};

这应该确保使用this.setState() 正确地将组件的状态从真更新为假。