React+MUI项目：点击按钮触发Google Places API而非输入变更

核心思路 #

• 阻断Google Places Autocomplete对输入框的实时监听，仅通过按钮点击手动触发API请求
• 手动控制自动完成下拉菜单的显示时机，避免额外点击输入框
• 确保API请求仅在按钮点击时发起一次，彻底杜绝输入变更时的无效调用

具体实现代码 #

方案一：提前初始化Autocomplete，手动控制触发时机 #

import React, { useRef, useEffect } from 'react';
import { TextField, Button, Box } from '@mui/material';

const AddressInput = () => {
  const inputRef = useRef(null);
  const autocompleteRef = useRef(null);
  const isSearching = useRef(false);

  useEffect(() => {
    if (!window.google) return;

    // 初始化Autocomplete，配置基础参数但禁用自动触发
    autocompleteRef.current = new window.google.maps.places.Autocomplete(
      inputRef.current,
      {
        types: ['address'],
        fields: ['formatted_address', 'geometry', 'name'],
      }
    );

    // 覆盖输入框的默认输入事件，阻止Autocomplete的实时监听
    const inputElement = inputRef.current;
    const originalOnInput = inputElement.oninput;
    inputElement.oninput = (e) => {
      e.stopPropagation();
      // 保留输入框的正常输入行为，仅阻断Autocomplete的自动触发
      if (originalOnInput) originalOnInput.call(inputElement, e);
    };

    return () => {
      autocompleteRef.current = null;
      inputElement.oninput = originalOnInput;
    };
  }, []);

  const handleSearchClick = () => {
    if (isSearching.current || !inputRef.current.value.trim() || !autocompleteRef.current) return;

    isSearching.current = true;
    // 手动调用Google Places API获取预测结果
    const service = new window.google.maps.places.AutocompleteService();
    service.getPlacePredictions(
      {
        input: inputRef.current.value,
        types: ['address'],
      },
      (predictions, status) => {
        isSearching.current = false;
        if (status !== window.google.maps.places.PlacesServiceStatus.OK || !predictions) return;

        // 强制触发Autocomplete下拉菜单显示
        inputRef.current.focus();
        // 模拟输入事件触发Autocomplete的内部渲染逻辑
        const inputEvent = new Event('input', { bubbles: true });
        inputRef.current.dispatchEvent(inputEvent);
        // 调用Autocomplete内部的搜索方法，注入手动获取的结果
        if (autocompleteRef.current.gm_accessors_.search) {
          autocompleteRef.current.gm_accessors_.search(inputRef.current.value);
        }
      }
    );
  };

  return (
    <Box display="flex" gap={2} alignItems="center">
      <TextField
        ref={inputRef}
        label="输入地址"
        variant="outlined"
        fullWidth
        autoComplete="off"
      />
      <Button variant="contained" onClick={handleSearchClick}>
        搜索地址
      </Button>
    </Box>
  );
};

export default AddressInput;

方案二：点击按钮时才初始化Autocomplete（更轻量） #

import React, { useRef } from 'react';
import { TextField, Button, Box } from '@mui/material';

const AddressInput = () => {
  const inputRef = useRef(null);
  const autocompleteRef = useRef(null);
  const isSearching = useRef(false);

  const handleSearchClick = () => {
    if (isSearching.current || !window.google || !inputRef.current.value.trim()) return;

    isSearching.current = true;
    // 首次点击时初始化Autocomplete
    if (!autocompleteRef.current) {
      autocompleteRef.current = new window.google.maps.places.Autocomplete(
        inputRef.current,
        { types: ['address'], fields: ['formatted_address', 'geometry', 'name'] }
      );
      // 初始化后立即阻断实时输入监听
      inputRef.current.oninput = (e) => e.stopPropagation();
    }

    // 强制触发搜索和下拉显示
    inputRef.current.focus();
    const inputEvent = new Event('input', { bubbles: true });
    inputRef.current.dispatchEvent(inputEvent);
    
    if (autocompleteRef.current.gm_accessors_.search) {
      autocompleteRef.current.gm_accessors_.search(inputRef.current.value);
      isSearching.current = false;
    }
  };

  return (
    <Box display="flex" gap={2} alignItems="center">
      <TextField
        ref={inputRef}
        label="输入地址"
        variant="outlined"
        fullWidth
        autoComplete="off"
      />
      <Button variant="contained" onClick={handleSearchClick}>
        搜索地址
      </Button>
    </Box>
  );
};

export default AddressInput;

关键细节说明 #

• 阻断实时触发：通过覆盖输入框的oninput事件并调用stopPropagation，阻止Google Places的默认输入监听逻辑，彻底避免输入变更时的API请求。
• 手动API调用：使用AutocompleteService.getPlacePredictions手动发起请求，确保仅在按钮点击时触发一次，同时通过isSearching标记避免重复请求。
• 强制显示下拉：通过聚焦输入框、模拟输入事件，以及调用Autocomplete内部的搜索方法，直接触发下拉菜单渲染，无需用户额外点击输入框。

额外注意事项 #

• 确保Google Places API脚本已正确加载（可在index.html中静态引入，或通过动态加载方式注入）
• 检查API密钥权限，确保Autocomplete和AutocompleteService接口已被启用
• 可添加loading状态提示，提升用户体验

内容的提问来源于stack exchange，提问作者Oren Papa