Question

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

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

现在我的代码看起来像这样：

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

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

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

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

但是使用这段代码我得到了我的输入，但当我输入建议时，似乎它不起作用。

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

Answer 1

简而言之，您获取了<input />呈现的TextField DOM元素的引用，然后在componentDidMount（）中正常执行google.maps.new places.Autocomplete()。在Autocomplete的{{1}}事件中，您可以执行某些操作，例如将其传递给Redux操作或父级提供的回调/处理程序（例如onPlaceChanged））

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

place_changed

Material-ui - Google自动填充地址

1 个答案: