如何在Material UI對話框中創建Google自動填充

我試圖將google autocomplete添加到我的項目中。我也在我的項目中使用了material-ui v1.beta.12。如何在Material UI對話框中創建Google自動填充

如果我將文本框置於模態對話框之外，它將毫無問題地運行。但是，如果我將文本框放入模式對話框中，下拉列表不會顯示出來。這是因爲兩個 <div class="pac-container"></div>（谷歌） <div data-mui-portal="true"></div>（來自material-ui）放置在不同的容器外，我認爲。

這裏是我的代碼

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>

TextFieldGroup.tsx

class TextFieldGroup extends React.Component<any, any> { 
    constructor(props) { 
     super(props) 
    } 

    private autocomplete; 
    private txtInput: HTMLInputElement; 

    initGoogleAutoComplete =() => { 
     const { googleAutoComplete } = this.props; 

     if (googleAutoComplete) { 
      var input = this.txtInput; 
      var options = { 
       types: ['geocode'], 
       componentRestrictions: { country: 'au' } 
      }; 
      this.autocomplete = new google.maps.places.Autocomplete(input, options); 
     } 
    } 

    componentDidMount(){ 
     this.initGoogleAutoComplete(); 
    } 

    render() { 
     const { 
      input, googleAutoComplete 
     } = this.props 

     return (
      <TextField 
       inputProps={{ ref: (node) => this.txtInput = findDOMNode(node) }} 
       {...input} 
      /> 
     ) 
    } 
} 

export default TextFieldGroup;

Container.tsx

<Dialog> 
    <DialogTitle> 
     ... 
    </DialogTitle> 
    <DialogContent> 
     <Grid container> 
      <Grid item xs={12} sm={12} md={12} lg={12} xl={12}> 
       <Field name="AddressStreet" component={TextFieldGroup} type="text" {...{ label: "Street", googleAutoComplete: true} /> 
      </Grid> 
     </Grid> 
    </DialogContent> 
    <DialogActions className={"dialog-action"}> 
     ... 
    </DialogActions> 
</Dialog>

來源

2017-09-25 edidiway

當控制檯出現錯誤時，您是否看到錯誤？ – henrisycip

我想我找到了解決辦法。這是因爲material-ui dialog的z-index被設置爲1500.所以解決方案是在我的CSS中爲pac-container設置z-index。

.pac-container { 
    z-index: 9999; 
}

來源

2017-09-27 01:21:17 edidiway

如何在Material UI對話框中創建Google自動填充

回答

相關問題