Material-ui - Google自動填充地址

我在我的React應用程序中使用Material-Ui，並試圖將地址的輸入google自動填充添加到我的表單中。Material-ui - Google自動填充地址

這是我的問題，我找到了這個庫https://github.com/ErrorPro/react-google-autocomplete它集成了谷歌地圖API的地方，但輸入看起來像最基本的輸入，即0樣式。

現在我的代碼看起來是這樣的：

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

此代碼工作正常並打印地址，簡單的問題是，輸入有默認的外觀和感覺，我希望它有料 - 一個。

我也看過這個庫https://github.com/ydeshayes/googlePlaceAutocomplete這似乎正是我想要的，但我不能使它的工作，它似乎沒有太多的文件。於是，我就寫這樣的代碼：

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

但有了這個代碼，我有我的輸入，但是當我在裏面鍵入建議，以便它似乎不起作用。

所以我的問題是：有沒有辦法將AutoComplete組件從material-ui包裝到TextField元素中？

來源

2016-12-09 Azilhan

是的，我已經這樣做了。我試圖提取出我對jsFiddle所做的一切。準備好後我會發佈一個答案。 –

簡而言之，您抓取TextField呈現的<input /> DOM元素的引用，然後在componentDidMount（）中正常執行google.maps.new places.Autocomplete()。在3210的place_changed事件，你要麼做一些與喜歡它傳遞給一個終極版的行動或由父（如onPlaceChanged）

這裏提供的回調/處理器是一點點的jsfiddle的CSS添加，使其看起來不錯。它假設谷歌的地方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> 
    ); 
    } 
}

來源

2016-12-09 20:39:46

嗯我有問題，當我嘗試執行您的代碼：首先，我必須將'place_changed'函數更改爲一個經典的而不是箭頭，而當'（this.locationSearch = ref.input）} hintText =「搜索附近」/>'執行控制檯告訴我，ref是空的... 你有什麼想法嗎？更多的是，當我在Textarea中輸入文字時，我在控制檯中出現錯誤，說出了意外的批號...每次輸入Textarea時都會彈出 – Azilhan

Material-ui - Google自動填充地址

回答

相關問題