Question

我尝试将Google自动填充功能添加到我的项目中。我也在我的项目中使用了材料-ui v1.beta.12。

如果我将文本框放在模态对话框之外，它运行没有问题。但是，如果我将文本框放在模态对话框中，则下拉列表不会显示。这是因为两者 <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>

Answer 1

我想我找到了解决方案。这是因为material-ui对话框的z-index设置为1500.所以解决方案是在我的CSS中为pac-container设置z-index。

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

如何在“材质UI”对话框中创建Google自动填充

1 个答案: