DOM引用（findDOMNode）

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模式中。当我在引导模态之外放置完全相同的文本框时，它就像微风一样。

知道为什么文本框在模态内部没有显示建议？

Answer 1

这是造型问题，因为模态的z-index＆gt;下拉列表（.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;
}

Answer 2

DOM引用（findDOMNode）

您不应在react组件中选择id为dom的元素。请改用ref（reference）。详细了解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"
            />
        );
    }
}

Google商家信息自动填充无法正常工作（在Bootstrap模式中）

更新

2 个答案:

DOM引用（findDOMNode）