Question

我想在点击地图后推送标记数组。我已经尝试过了（在“这不起作用”下），但是它引发了error。

PS：如何根据光标位置获取光标位置以创建新标记？

我真的很困。感谢您的任何建议。

import React, { Component } from 'react';
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';

class Map extends Component {
  state = {
    markers: [
      {position: {lat:49.79, lng: 18}, key:1},
      {position: {lat:49.69, lng: 18}, key:2},
      //{position: {lat:49.59, lng: 18}, key:3}
    ]
  };

//this doesn't work

  handleMapClick() {

    this.setState({ markers: [...this.state.markers, {position: {lat:49.59, 
    lng: 18}, key:3}]})
  }



   render() {
       const GoogleMapExample = withGoogleMap(props => (
       <GoogleMap
          defaultCenter = { { lat: 49.82, lng: 18.16 } }
          defaultZoom = { 10 } 
          onClick = {this.handleMapClick}
       >

          {this.state.markers.map(marker => <Marker position= 
          {marker.position} key={marker.key} />)}
       </GoogleMap>
   ));
   return(
      <div>
        <GoogleMapExample
        containerElement={ <div style={{ height: `600px`, width: 
        '800px',display: "inline-block" }} /> }
        mapElement={ <div style={{ height: `100%` }} /> }



       />
       </div>
       );}};

 export default Map;

Answer 1

绑定您的回调函数或使用箭头函数

绑定

onClick = {this.handleMapClick.bind(this)}

箭头功能

onClick = {(arg) => this.handleMapClick(arg) }

来自doc：

您必须小心JSX回调中的含义。在   JavaScript，默认情况下不绑定类方法。如果你忘记了   绑定this.handleClick并将其传递给onClick，这将是未定义的   实际调用该函数的时间。

这不是特定于React的行为；这是功能运作的一部分   使用JavaScript。通常，如果您引用的方法不带（）   之后，例如onClick = {this.handleClick}，则应将其绑定   方法。

Answer 2

将handleMapClick转换为箭头函数或将其绑定到构造函数中（这些是等效的解决方案）

handleMapClick = () => {

    this.setState({ markers: [...this.state.markers, {position: {lat:49.59, 
    lng: 18}, key:3}]})
  }

Answer 3

创建构造函数以将this绑定到函数。

constructor(props){
  super(props);
  this.handleMapClick = this.handleMapClick.bind(this)
}

反应将数组推入状态

3 个答案: