Reactjs Antd 库和 google 地图 Places

Question

我和我的团队一直在使用 Antd 反应组件库。我被要求将 google.map 的 Places 库连接到一个输入字段，以便我们可以获得一个简单的地址下拉列表。

问题是 Antd 的输入组件隐藏在引擎盖下。所以 当我从 google.maps 地点菜单中点击一个地址时，它会在输入字段中出现一毫秒然后消失 。

event.preventDefault()、event.stopPropoagtion()我都试过了。将 google.maps 地方返回的数据与嵌套良好的 react-ui 组件结合起来有什么技巧吗？

Answer 1

这是一个很简单的状态管理的事情。听起来 google-places 输入字段工作正常，否则根本不会显示。如果您的输入字段连接到比方说 Reactjs，那么您将需要将 google-places 响应数据添加到您的状态管理中，它应该停止消失。当公司使用自定义状态管理系统时，这种情况经常发生。

Answer 2

（评论太长）

我有完全相同的问题。我将 NextJS 与功能组件和 @react-google-maps/api 库一起使用。

我使用的解决方法： 简单的 <input> 元素结合正确的 CSS class 使它看起来像 Antd <Input>.

像这样：

<LoadScript
    googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY}
    libraries={libraries}
>
    <Autocomplete
        onLoad={(autocomplete) => setAutocomplete(autocomplete)}
        onPlaceChanged={onPlaceChanged}
        restrictions={{ country: "fr" }}
        fields={['geometry.location', 'formatted_address']}
    >
        <input
            type="text"
            placeholder="Enter your address"
            className="ant-input"
        />
    </Autocomplete>
</LoadScript>

这样，当从“位置”菜单中单击地址时，其值将保留在输入字段中。

如果有人有更好、更简单的解决方案，我正在寻找一个！

Reactjs Antd 库和 google 地图 Places

Reactjs Antd library and google maps Places

reactjs

google-places-api

antd