Reactjs Antd库和google地图位置

我的团队和我一直在使用

Antd

react组件库。我被要求将

google.map

的Places库连接到一个输入字段，这样我们就可以得到一个简单的地址下拉列表

问题是

Antd

的输入组件被包裹在引擎盖下。因此，当我从

google.maps

Places菜单中单击地址时，它会在输入字段中出现一毫秒，然后消失

---

我尝试了所有的

事件.preventDefault（）

，

事件.stopPropoagtion（）

。将

google.maps

与嵌套良好的react ui组件结合起来有什么诀窍吗？

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

（评论太长）

我也有同样的问题。 我正在使用带有功能组件和库的NextJS

我使用的解决方法是：简单的

元素与正确的CSS类相结合，使其看起来像Antd

像这样：

<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>

设置自动完成（自动完成）}
onPlaceChanged={onPlaceChanged}
限制={{国家：“fr”}
字段={['geometry.location'，'formatted_address']}
>

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

---

如果有人有一个更好的和更少的黑客解决方案，我正在寻找一个

有关于你的实现的代码吗？好的，我找到了一种方法，但我不确定这是最好的方法，我使用的是功能组件，所以当我决定尝试使用ref时，我发现它与功能组件不兼容，然后我看到了useRef钩子。我尝试了useRef钩子，但同样的问题是无法引用实际的HTML元素。当时我尝试在antD输入元素周围使用包装器，并在那里创建了一个ref。然后，我在新的ref上使用本机children方法，并能够遍历到antd组件中的html输入元素。const AddressField=（）=>{let wrapper=useRef（null）；useffect（（）=>{if（loadGoogleMapsApi）{const autoPlaces=loadGoogleMapsApi（{key:

YOUR-key-HERE

，库：[

places

]}）；autoPlaces.then（（数据）=>{new data.places.Autocomplete（wrapper.current.children[0]，{types:['geocode']}}）.catch（（err）=>console.log（err））}，[]）return这是antd组件，你说的代码是什么意思“有关于你的工具的代码吗？”好的，我明白你的意思