如何在 React 应用程序中获取谷歌地图 API 输入字段的状态更新

Question

根据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;

我设法让它正常工作。但是，我看到的唯一问题是，每当我选择/单击自动完成选项时，输入栏的值都会使用所选地址更新，但不会处于状态。 您可以查看此short video demo，并请建议我应该做哪些更改才能使状态管理正常工作？

Answer 1

这里的问题是您正在监听输入的 onChange 事件，而不是自动完成的 places_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;