Google 地方自动完成不起作用（在 Bootstrap 模态）

Question

我正在尝试在我的 React 应用程序中包含一个 google 位置自动完成输入框。

我按照 guide here 放置了一个 <input> 文本字段，并像这样初始化了搜索框：

export default class MySearch extends class Component {
    ...

    componentDidMount() {
        var defaultBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(-33.8902, 151.1759),
            new google.maps.LatLng(-33.8474, 151.2631));

        var input = document.getElementById('searchTextField');

        var searchBox = new google.maps.places.SearchBox(input, {
            bounds: defaultBounds
        });
    }
    render() {
        return (
            ...

            <input id="searchTextField"
                   type="text"
                   className="form-control"
                   placeholder="Search for a location"
            />
        );
    }
}

但是我没有看到从文本字段中下拉的任何建议。

我检查了网络选项卡，查看 API 请求是否在我键入时被命中，而且我不仅看到请求，还看到来自 API 的响应，具有匹配的位置，基于在我的搜索字词上，当我输入时。

我不知道为什么收到的建议没有显示在我的输入框下方的下拉建议列表中。

提前致谢:)

更新

PS：我将文本框放在 bootstrap 模式中。当我在 bootstrap 模态之外放置完全相同的文本框时，它的工作方式类似于 breeze.

知道为什么文本框在模态框内不显示建议吗？

Answer 1

DOM参考（查找DOM节点）

你不应该 select 反应组件中带有 id 的 dom 元素。请改用 ref（参考）。在此处了解有关 findDOMNode 的更多信息 https://facebook.github.io/react/docs/react-dom.html#finddomnode

import { findDOMNode } from 'react-dom';

export default class MySearch extends class Component {
    componentDidMount() {
        var defaultBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(-33.8902, 151.1759),
            new google.maps.LatLng(-33.8474, 151.2631));

        var input = findDOMNode(this.refs['searchTextField']);

        var searchBox = new google.maps.places.SearchBox(input, {
            bounds: defaultBounds
        });
    }
    render() {
        return (
            <input ref="searchTextField"
                   type="text"
                   className="form-control"
                   placeholder="Search for a location"
            />
        );
    }
}

Answer 2

这是一个样式问题，因为模式的 z-index > 下拉列表（.pac-container 的）z-index。使用以下 CSS 片段修复它：

.pac-container {
    background-color: #FFF;
    z-index: 2001;
    position: fixed;
    display: inline-block;
    float: left;
}
.modal{
    z-index: 2000;
}
.modal-backdrop{
    z-index: 1000;
}

Google 地方自动完成不起作用（在 Bootstrap 模态）

Google Places autocomplete not working (in Bootstrap modal)

google-maps

google-places-api

bootstrap-modal

reactjs

更新

DOM参考（查找DOM节点）