0
我试图将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>
当控制台出现错误时,您是否看到错误? – henrisycip