Can't set state when onRadiusChanged - node.js

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

Answer 2

Please try this, the issue seems to be with binding.
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>
);
}
}