Material-ui - 谷歌自动完成地址

Question

我在我的 React 应用程序中使用 Material-Ui，我正在尝试在我的表单中添加一个输入 google 自动补全地址。

这是我的问题，我找到了这个库https://github.com/ErrorPro/react-google-autocomplete，它集成了 google maps API for places，但输入看起来像是最基本的输入，即 0 样式。

目前我的代码如下所示：

<Autocomplete
onPlaceSelected={(place) => {
    console.log("Place selected", place);
}}
types={['address']}
/>

这段代码可以正常工作并打印地址，简单的问题是输入具有默认外观，我希望它具有material-ui。

我还查看了这个库https://github.com/ydeshayes/googlePlaceAutocomplete，这似乎正是我想要的，但我无法让它工作，而且似乎没有太多记录。所以我试着写这样的代码：

<GooglePlaceAutocomplete 
    onChange={this.onAutoCompleteInputChangeFct.bind(this)}
    onNewRequest={this.onClickLocationFct.bind(this)}
    name={'location'}
/>

但是对于这段代码，我有我的输入，但是当我输入建议时，它似乎不起作用。

所以我的问题是：有没有办法将 AutoComplete 组件从 material-ui 包装到 TextField 元素中？

Answer 1

简而言之，您获取由TextField 渲染的<input /> DOM 元素的引用，然后在componentDidMount() 中照常执行google.maps.new places.Autocomplete()。在Autocomplete 的place_changed 事件中，您将执行一些操作，例如将其传递给 Redux 操作或由父级提供的回调/处理程序（例如 onPlaceChanged）

这是一个 jsFiddle，添加了一些 CSS 使其看起来不错。它假设 Google Places API 已经加载到浏览器中：https://jsfiddle.net/e0jboqdj/3/

class LocationSearchBox extends React.Component {
  componentDidMount() {
    if (typeof google === 'undefined') {
      console.warn('Google Places was not initialized. LocationSearchBox will not function.');
      return;
    }

    const { country, onPlaceChanged } = this.props;
    const { places } = google.maps;

    let options;

    if (country) {
      options = {
        componentRestrictions: { country }
      };
    }

    const input = this.locationSearch;

    input.setAttribute('placeholder', '');

    if (!input._autocomplete) {
      input._autocomplete = new places.Autocomplete(input, options);

      input._autocomplete.addListener('place_changed', () => {
        onPlaceChanged && onPlaceChanged(input._autocomplete.getPlace());
      }.bind(input._autocomplete));
    }
  }

  render() {
    return (
      <span>
        <TextField ref={ref => (this.locationSearch = ref.input)} hintText="Search nearby" />
      </span>
    );
  }
}