Can't set state when onRadiusChanged

Question

I can not set state in this code. I understand it because I did not bind the function getvalue. Otherwise I cannot call this.radius. I this code this.radius is 5000. If I changed it to

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

it returns undefined.

So what do I need to do

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

I found the answer. You need to ref the circle component and then you can call the getValues function. Also you need tot return false the shouldComponentUpdate

This is the code

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>
    );
  }
}