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

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

0 голосов
/ 13 декабря 2018

Как добавить кнопку в информационном окне с помощью 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)
  }

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

1 Ответ

0 голосов
/ 14 декабря 2018

Я полагаю, что состояние компонента корректно обновляется в вашем примере, очевидно, это поведение связано с самим компонентом 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} />;
  }
}

Demo

...