Reactjs 如何在React应用程序中更新google map api输入字段的状态

根据政府的官方文件， 我试图在我的

React

应用程序中实现自动完成搜索

input

，如下所示：

import React, { Component } from 'react';

export class App extends Component {
    state = {
        location: ''
    };

    handleChange = (e) => {
        this.setState({ location: e.target.value });
    };
    render() {
        function initAutocomplete() {
            var input = document.getElementById('pac-input');
            var searchBox = new window.google.maps.places.SearchBox(input);
        }
        initAutocomplete();
        return (
            <input
                defaultValue={this.state.location}
                onChange={this.handleChange}
                id="pac-input"
                className="controls"
                type="text"
                placeholder="Search your College"
            />
        );
    }
}

export default App;

import React，{Component}来自'React'；
导出类应用程序扩展组件{
状态={
位置：“”
};
handleChange=（e）=>{
this.setState（{location:e.target.value}）；
};
render（）{
函数initAutocomplete（）{
var input=document.getElementById（'pac-input'）；
var searchBox=newwindow.google.maps.places.searchBox（输入）；
}
initAutocomplete（）；
返回(
);
}
}
导出默认应用程序；

我设法让它正常工作。但是，我看到的唯一问题是，每当我选择/单击autocomplete选项时，输入栏的值都会用所选地址更新，但不会处于状态。

---

您可以查看此内容，并建议我应该做哪些更改才能使状态管理正常工作？

这里的问题是，您只收听输入的

onChange

事件，而不是自动完成的

places\u changed

事件，因此，当您从位置建议的自动完成列表中选择位置时，输入的

onChange

功能不会运行。尝试按如下方式修改代码：

import React, { Component } from "react";

export class App extends Component {
  state = {
    location: ""
  };

  componentDidMount() {
    const app = this;
    function initAutocomplete() {
      var input = document.getElementById("pac-input");
      var searchBox = new window.google.maps.places.SearchBox(input);
      searchBox.addListener("places_changed", function() {
        app.setState({ location: document.getElementById("pac-input").value });
      });
    }
    initAutocomplete();
  }

  handleChange = e => {
    this.setState({ location: e.target.value });
  };

  render() {
    return (
      <input
        defaultValue={this.state.location}
        onChange={this.handleChange}
        id="pac-input"
        className="controls"
        type="text"
        placeholder="Search your College"
      />
    );
  }
}

export default App;

import React，{Component}来自“React”；
导出类应用程序扩展组件{
状态={
地点：“
};
componentDidMount（）{
const-app=这个；
函数initAutocomplete（）{
var输入=document.getElementById（“pac输入”）；
var searchBox=newwindow.google.maps.places.searchBox（输入）；
addListener（“places\u changed”，function（））{
app.setState（{位置：document.getElementById（“pac输入”）.value}）；
});
}
initAutocomplete（）；
}
handleChange=e=>{
this.setState（{location:e.target.value}）；
};
render（）{
返回(
);
}
}
导出默认应用程序；

您能否提供一个codesandbox或stackblitz，以便我们能够从我们这边重现此问题？@evan给您：确保在react-dev工具中查找

this.state.location

谢谢，我可以看到问题所在。让我在一分钟内给你一个完整的答案。它正在工作，但它没有给我完整的地址。例如，如果我键入并选择麻省理工学院，而不是给我看

M.i.T，马萨诸塞州剑桥大道，马萨诸塞州，马萨诸塞州，美国

还有一个案例，我输入了

DY Patil

，让我的同事

DY Patil工程学院位于印度马哈拉施特拉邦浦那州洛赫冈市洛赫冈

。该州的价值观向我展示了一些更奇怪的东西，比如印度马哈拉施特拉邦412105的夏霍利，洛赫冈，浦那，马哈拉施特拉邦，D Y帕蒂尔知识城。然后使用

document.getElementById（“pac输入”）.value

，这就更容易了。我将编辑我的答案。