Как остановить рисование после завершения одного многоугольника или прямоугольника в DrawingManager на реагировать-google-карты?

Question

Я буду использовать мой код в качестве ссылки:

export default class DrawingContainer extends Component {
  static propTypes = {
    onPolygonComplete: PropTypes.func
  };

  state = {
    drawingMode: 'rectangle'
  };

  render() {
    return (
      <DrawingManager
        drawingMode={this.state.drawingMode}
        onPolygonComplete={polygon => {
          this.setState({
            drawingMode: ''
          }, () => {
            if (this.props.onPolygonComplete) {
              this.props.onPolygonComplete(convertPolygonToPoints(polygon));
            }
          });
        }}
        onRectangleComplete={rectangle => {
          this.setState({
            drawingMode: ''
          }, () => {
            if (this.props.onPolygonComplete) {
              this.props.onPolygonComplete(
                convertBoundsToPoints(rectangle.getBounds())
              );
            }
          });
        }}
        defaultOptions={{
          drawingControl: true,
          drawingControlOptions: {
            position: window.google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              window.google.maps.drawing.OverlayType.POLYGON,
              window.google.maps.drawing.OverlayType.RECTANGLE
            ]
          },
          rectangleOptions: polygonOptions,
          polygonOptions
        }}
      />
    );
  }
}

Таким образом, есть два подхода, которым я следовал, чтобы попытаться переключить режим рисования в режим перетаскивания по умолчанию после первого рисования.

1. Либо я сохраняю текущий режим рисования (многоугольник или прямоугольник) в собственное состояние и передаю его DrawingManager, Я установил свой вариант по умолчанию в состоянии под названием drawingMode в 'rectangle', передать его DrawingManager а затем в функции onRectangleCompleteЯ установил ее как пустую строку, и она работает, так как карта изначально загружается в режиме прямоугольника. Но как только я нажимаю на один из элементов управления рисованием, он никогда не останавливает рисование, даже если для переменной задана пустая строка. Так что я думаю, что здесь есть нарушение контролируемого компонента.
2. Второй подход, который я попробовал, состоял в том, чтобы явно попытаться найти класс Google DrawingManager, чтобы использовать его. setDrawingMode функция. Но я пытался использовать ref на менеджере рисования, а затем перешел в его состояние, и смог увидеть его там, но потом я прочитал имя переменной DO_NOT_USE_THIS_ELSE_YOU_WILL_BE_FIRED - Я считаю, что библиотека препятствует такому подходу.

Итак, как мне использовать элементы управления рисованием вместе с изменением режима рисования обратно на режим по умолчанию после завершения первого рисования?

Answer 1

  handlePolygonComplete(polygon) {
      console.log(this);
      const paths = polygon.getPath().getArray();
      if (paths.length < 3) {
           polygon.setPaths([]);
           alert("You need to enter at least 3 points.")
      } else {
          const coords = paths.map((a) => [a.lat(), a.lng()]);
          this.setDrawingMode(null);
          this.setOptions({ drawingControlOptions: { drawingModes: [] } });
          window.addPolygonToState(coords);
  }  

а также

 <DrawingManager
      onPolygonComplete={this.handlePolygonComplete}
 >

Здесь я проверяю, поставил ли пользователь хотя бы 3 точки, если он это сделал, получает его координаты и удаляет режим рисования.

Answer 2

Поэтому я просто установил переключатель с функцией, которая остановила рендеринг DrawingManager

<GoogleMap
    defaultZoom={10}
    defaultCenter={new google.maps.LatLng(38.9072, -77.0369)}
  >
    {this.props.creatingPolygon && <DrawingManager
      defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
      defaultOptions={
        {
          drawingControl: this.props.creatingPolygon,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              this.props.creatingPolygon && google.maps.drawing.OverlayType.POLYGON
            ],
          }
        }
      }
      onPolygonComplete={(polygon) => this.createDeliveryZone(polygon)}
    />}
  </GoogleMap>