谷歌将 api 文本放置在 mui TextField 中不起作用

Question

我正在使用 Google Places API 自动生成 addresses。我有一个来自 html 的普通 input 标签。当用户在其中键入 input 时，它会在下拉列表中显示谷歌位置。效果很好。接下来我使用了 mui TextField。在该文本字段中，当用户键入文本时，不会显示谷歌位置。我不知道如何解决它。请帮我解决一些问题

这是代码：

import React, { useState, useEffect, useRef } from "react";
import TextField from "@mui/material/TextField";

let autoComplete;

const loadScript = (url, callback) => {
  let script = document.createElement("script");
  script.type = "text/javascript";

  if (script.readyState) {
    script.onreadystatechange = function () {
      if (script.readyState === "loaded" || script.readyState === "complete") {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {
    script.onload = () => callback();
  }

  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
};

function handleScriptLoad(updateQuery, autoCompleteRef) {
  autoComplete = new window.google.maps.places.Autocomplete(
    autoCompleteRef.current,
    { types: ["(cities)"], componentRestrictions: { country: "ind" } }
  );
  autoComplete.setFields(["address_components", "formatted_address"]);
  autoComplete.addListener("place_changed", () =>
    handlePlaceSelect(updateQuery)
  );
}

async function handlePlaceSelect(updateQuery) {
  const addressObject = autoComplete.getPlace();
  const query = addressObject.formatted_address;
  updateQuery(query);
  console.log(addressObject);
}

function App() {
  const [query, setQuery] = useState("");
  const autoCompleteRef = useRef(null);

  useEffect(() => {
    loadScript(
      `https://maps.googleapis.com/maps/api/js?key={API-KEY}&libraries=places`,
      () => handleScriptLoad(setQuery, autoCompleteRef)
    );
  }, []);

  return (
    <div>
      <TextField
        inputRef={autoCompleteRef}
        onChange={(event) => setQuery(event.target.value)}
        value={query}
        autoComplete="off"
        id="outlined-basic"
        label="Enter Place"
        variant="outlined"
      />

      <input
        style={{ height: 40, fontSize: 16 }}
        ref={autoCompleteRef}
        onChange={(event) => setQuery(event.target.value)}
        placeholder="Enter a City"
        value={query}
      />

    </div>
  );
}

export default App;

我得到的输出： 当我输入普通输入时，它起作用了 image 1

当我键入 mui TextField 时，它不起作用 image 2

请帮忙解决一些问题

Answer 1

您需要添加ref

 <TextField
        inputRef={autoCompleteRef}
        ref={autoCompleteRef}
        onChange={(event) => setQuery(event.target.value)}
        value={query}
        autoComplete="off"
        id="outlined-basic"
        label="Enter Place"
        variant="outlined"
      />

它对我有用