StopPropagation react google 地图自动完成

Question

我想停止 https://react-google-maps-api-docs.netlify.app/#autocomplete 的传播。自动完成功能运行良好，但我需要在弹出窗口中使用它，当我 select 一个地方时，弹出窗口会自动关闭。

如果有另一个库可以很好地处理弹出窗口和模态窗口

const [autocomplete, setAutocomplete] = useState<any>(null);
        const onLoad = (auto: any) => {
            if (!autocomplete) {
                setAutocomplete(auto);
            }

        };

        const onPlaceChanged = () => {
            if (autocomplete) {

                console.log(autocomplete?.getPlace());

            } else {
                console.log('Autocomplete is not loaded yet!');
            }
        };

<Autocomplete
                            onLoad={onLoad}
                            onPlaceChanged={onPlaceChanged}
                        >

                            <chakra.input
                                type='text'
                                as={Input}
                                placeholder='Customized your placeholder'
                                style={{
                                    boxSizing: `border-box`,
                                    border: `1px solid transparent`,
                                    width: `240px`,
                                    height: `32px`,
                                    padding: `0 12px`,
                                    borderRadius: `3px`,
                                    boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                                    fontSize: `14px`,
                                    outline: `none`,
                                    textOverflow: `ellipses`,
                                    position: 'absolute',
                                    left: '50%',
                                    marginLeft: '-120px',
                                    animationName: 'none',
                                    zIndex: 9999,
                                }}
                            />
                        </Autocomplete>

Answer 1

我正在使用 chakraUI，我从 discord（dodas 用户）那里得到帮助，这是他提出的解决方案。基本上他捕捉到 mousedown 事件（google 阻止点击事件）并且当弹出窗口打开时，select 项目或点击触发按钮对其他事件什么都不做只是关闭弹出窗口。

https://codesandbox.io/s/popovergoogle-autocomplete-6nvtb?file=/src/App.js:0-3329

import React, { useState, useEffect, useRef } from "react";
import {
  Button,
  Stack,
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverArrow,
  PopoverCloseButton,
  Box,
  Portal,
  PopoverFooter,
  useRadioGroup,
  useRadio
} from "@chakra-ui/core";
import { useEvent } from "react-use";
import {
  GoogleMap,
  useJsApiLoader,
  Autocomplete
} from "@react-google-maps/api";

let autoComplete;

export function App() {
  const { isLoaded, loadError } = useJsApiLoader({
    googleMapsApiKey: "YOUR_KEY", // ,
    libraries: ["places"]
    // ...otherOptions
  });

  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const openPopover = () => setIsPopoverOpen(true);
  const closePopover = () => setIsPopoverOpen(false);

  const triggerRef = useRef(null);
  const popoverContentRef = useRef(null);
  const [autocomplete, setAutocomplete] = useState(null);

  const onLoad = (autocompleteInstance) => {
    console.log("autocomplete: ", autocomplete);
    setAutocomplete(autocompleteInstance);
  };

  const onPlaceChanged = () => {
    if (autocomplete) {
      console.log(autocomplete.getPlace());
    } else {
      console.log("Autocomplete is not loaded yet!");
    }
  };

  useEvent("mousedown", (ev) => {
    if (!isPopoverOpen) {
      return;
    }

    const clickedInsideTrigger = triggerRef.current.contains(ev.target);

    const clickedInsidePopover = popoverContentRef.current.contains(ev.target);

    const clickedInsideAutocomplete =
      ev.target.closest(".pac-container") != null;

    if (
      clickedInsideTrigger ||
      clickedInsidePopover ||
      clickedInsideAutocomplete
    ) {
      return;
    }

    closePopover();
  });

  return (
    <>
      <Box width="100vw" height="100vh">
        <Popover
          isOpen={isPopoverOpen}
          onOpen={openPopover}
          onClose={closePopover}
          closeOnBlur={false}
          isLazy
          placement="bottom-end"
        >
          <PopoverTrigger>
            <Button ref={triggerRef}>Trigger</Button>
          </PopoverTrigger>

          <PopoverContent ref={popoverContentRef}>
            <PopoverArrow />
            <PopoverCloseButton />
            <PopoverHeader>Confirmation!</PopoverHeader>
            <PopoverBody minH="20rem">
              {isLoaded && (
                <Autocomplete onLoad={onLoad} onPlaceChanged={onPlaceChanged}>
                  <input
                    type="text"
                    placeholder="Customized your placeholder"
                    style={{
                      boxSizing: `border-box`,
                      border: `1px solid transparent`,
                      width: `240px`,
                      height: `32px`,
                      padding: `0 12px`,
                      borderRadius: `3px`,
                      boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                      fontSize: `14px`,
                      outline: `none`,
                      textOverflow: `ellipses`,
                      position: "absolute",
                      left: "50%",
                      marginLeft: "-120px"
                    }}
                  />
                </Autocomplete>
              )}
            </PopoverBody>
          </PopoverContent>
        </Popover>
      </Box>
    </>
  );
}

StopPropagation react google 地图自动完成

StopPropagation react google maps autocomplete

google-maps

chakra

google-places

reactjs