reactjs - Material-ui - Google 自动完成地址

Question

我在我的 React 应用程序中使用 Material-Ui，并且我正在尝试将地址的输入谷歌自动完成功能添加到我的表单中。

这是我的问题，我找到了这个库 https://github.com/ErrorPro/react-google-autocomplete它集成了谷歌地图API的地点，但输入看起来像最基本的输入，即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

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

这是一个 jsFiddle，添加了一点 CSS，使其看起来更漂亮。它假设 Google Place 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>
    );
  }
}