Google-карты-реагировать infoWindow на изменение проблем

Question

Как добавить кнопку в информационном окне с помощью google-maps-реакции?

Здравствуйте, я пишу приложение React, у меня возникла проблема с изменением состояния в InfoWindow от google-maps-реагировать, решение выше помогло мне преодолеть это препятствие.

Однако сейчас у меня возникла проблема с желанием редактировать содержимое внутри моего компонента InfoWindowEx. Используя метод, описанный выше, я могу изменить состояние текстового поля внутри InfoWindowEx, однако, когда я нажимаю на текстовое поле и набираю текст, он позволяет мне набрать 1 букву, а затем мне придется снова щелкнуть текстовое поле, если Я хочу напечатать следующую букву и т. Д. Я думаю, что эта проблема связана с государством.

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

Вот мой компонент InfoWindowEx:

<InfoWindowEx
      key={currentInfoWindow.id}
      id={currentInfoWindow.id}
      marker={this.state.activeMarker}
      visible={this.state.showingInfoWindow}
      selectedPlace={this.state.selectedPlace}
      onInfoWindowClose={this.onInfoWindowClose}
    >

      <div >
        {infoWindowEditBoxes}
        {infoWindowContent}

      </div>
    </InfoWindowEx>

Поля редактирования отображаются в условных выражениях, вот они:

if (this.state.editButton) {
      infoWindowEditBoxes = (

        <div>
          <input key={this.props.marker}  id="editedName" type="text" placeholder="New Bathroom Name"  onChange={this.handleTextBoxState}></input>
          <input key={this.props.marker}  id="editedLocationName" type="text" placeholder="New Bathroom Location" onChange={this.handleTextBoxState}></input>
          <button onClick={() => this.handleSubmitChangesButtonState()}>Submit Changes</button>
        </div>
      );
    }
    else {
      infoWindowEditBoxes = null
    }

и вот моя функция изменения состояния:

 handleTextBoxState = (evt) => {
    const stateToChange = {}
    stateToChange[evt.target.id] = evt.target.value
    this.setState(stateToChange)
    console.log(stateToChange)
  }

Заранее спасибо!

Answer 1

Я полагаю, что состояние компонента корректно обновляется в вашем примере, по-видимому, это поведение связано с InfoWindowEx сам компонент. Как это реализовано, setState() вызывает повторную визуализацию InfoWindow компонент, который приводит к потере фокуса ввода.

Вы можете рассмотреть следующую обновленную версию компонента, которая предотвращает повторную визуализацию информационного окна, если оно уже открыто:

export default class InfoWindowEx extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
    this.infoWindowRef = React.createRef();
    this.containerElement = document.createElement(`div`);
  }

  componentDidUpdate(prevProps) {
    if (this.props.children !== prevProps.children) {
      ReactDOM.render(
        React.Children.only(this.props.children),
        this.containerElement
      );
      this.infoWindowRef.current.infowindow.setContent(this.containerElement);
      this.setState({
        isOpen: true
      });
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.isOpen) {
      return this.props.marker.position.toString() !== nextProps.marker.position.toString();
    }
    return true;
  }

  infoWindowClose(){
    this.setState({
      isOpen: false
    });
  }


  render() {
    return <InfoWindow onClose={this.infoWindowClose.bind(this)} ref={this.infoWindowRef} {...this.props} />;
  }
}

демонстрация