reactjs - 如何在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;