Не могу установить состояние, когда onRadiusChanged

Question

Я не могу установить состояние в этом коде. Я понимаю это, потому что я не связывал функцию getvalue. В противном случае я не могу назвать это. Радиус. Я этот код this.radius является 5000. Если я изменил его на

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

возвращает неопределенное значение.

Так что мне нужно сделать

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

Пожалуйста, попробуйте это, похоже, проблема связана с привязкой.

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 2

Я нашел ответ. Вам необходимо изменить компонент круга, а затем вызвать функцию getValues. Также вам нужно вернуть значение false the 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>
    );
  }
}