Google-maps-react infoWindow onChange проблемы
Как добавить кнопку в информационное окно с помощью Google-Maps-React?
Здравствуйте, я пишу приложение React, у меня возникла проблема с изменением состояния внутри InfoWindow из google-maps-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.info(stateToChange)
}
Заранее спасибо!
Ответы 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} />;
}
}