onRadiusChanged 时无法设置状态

Question

我无法在此代码中设置状态。我明白了，因为我没有绑定函数getvalue。否则我无法调用 this.radius。我这个代码this.radius是5000。如果我把它改成

 getvalues = (e)=> { console.log(e)}

它returns未定义。

那我需要做什么

class Mapspage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      location: { lat: 52.2387683, lng: 5.8322737 },
      position: [],
      radius: 5000,
    };
  }

  getvalues(e) {
    this.setState({'radius': this.radius});
  }

  render() {
    const MapWithAMarker = withGoogleMap(props => (
      <GoogleMap
        defaultZoom={11}
        defaultCenter={this.state.location}
      >
        <Circle
          radius={this.state.radius}
          editable={true}
          onRadiusChanged={this.getvalues}
          onDragEnd={this.getvalues}
          draggable={true}
          visible={true}
          center={this.state.location}
        />
      </GoogleMap>
    ));

    return (
      <div className="box box-default">
          <MapWithAMarker
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
          />
        </div>
    );
  }
}

Answer 1

我找到了答案。您需要引用 circle 组件，然后您可以调用 getValues 函数。您还需要 return false shouldComponentUpdate

这是代码

class Mapspage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      location: { lat: 52.2387683, lng: 5.8322737 },
      position: [],
      radius: 5000
    };
  }
  mapMounted = ref => {
    this.map = ref;
  };

  shouldComponentUpdate(nextProps, nextState) {
    return false;
  }

  getvalues = e => {
    const radius = this.map.getRadius();
    const center = this.map.getCenter();
    this.setState({ radius: radius });
    this.setState({
      "location.lat": center.lat(),
      "location.lng": center.lng()
    });
  };

  render() {
    const MapWithAMarker = withGoogleMap(props => (
      <GoogleMap defaultZoom={11} defaultCenter={this.state.location}>
        <Circle
          ref={this.mapMounted.bind(this)}
          radius={this.state.radius}
          editable={true}
          onRadiusChanged={props.getval}
          onDragEnd={props.getval}
          draggable={true}
          visible={true}
          center={this.state.location}
        />
      </GoogleMap>
    ));

    return (
      <div className="box box-default">
          <MapWithAMarker
            getval={this.getvalues.bind(this)}
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
          />
        </div>
    );
  }
}

Answer 2

请试试这个，问题似乎与绑定有关。

class Mapspage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      location: { lat: 52.2387683, lng: 5.8322737 },
      position: [],
      radius: 5000,
    };
  }

  getvalues = (e) => {
    this.setState({radius: this.radius});
  }

  render() {
    const MapWithAMarker = withGoogleMap(props => (
      <GoogleMap
        defaultZoom={11}
        defaultCenter={this.state.location}
      >
        <Circle
          radius={this.state.radius}
          editable={true}
          onRadiusChanged={this.getvalues}
          onDragEnd={this.getvalues}
          draggable={true}
          visible={true}
          center={this.state.location}
        />
      </GoogleMap>
    ));

    return (
      <div className="box box-default">
          <MapWithAMarker
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
          />
        </div>
    );
  }
}

onRadiusChanged 时无法设置状态

Can't set state when onRadiusChanged

google-maps

node.js

reactjs

react-google-maps