google-maps-react infoWindow onChange问题

Question

How to add a button in infowindow with google-maps-react?

你好，我正在写一个React应用程序，我在从谷歌地图- InfoWindow -react中更改地图内部的状态时遇到了问题，上面的解决方案帮助我克服了这个障碍。

但是现在，我在编辑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组件，从而导致失去输入焦点。

您可以考虑以下更新版本的component，如果它已经打开，则会阻止重新渲染info窗口：

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