Reactjs Antd库和谷歌地图位置

Question

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

问题是Antd的输入组件被包裹在引擎盖下面。因此，当我单击google.maps位置菜单中的地址时，它会在输入字段中出现毫秒，然后消失。

我试过了所有的event.preventDefault()、event.stopPropoagtion()。将google.maps位置返回的数据与嵌套良好的react ui组件组合在一起有什么技巧吗？

Answer 1

(太长，无法注释(

我也有同样的问题。我正在使用带有功能组件和@react谷歌地图/api库的NextJS。

我使用的解决方法：简单的<input>元素与正确的CSS类相结合，使其看起来像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>

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

如果有人有一个更好、不那么棘手的解决方案，我正在寻找！

Answer 2

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