此MUI自动完成代码有什么问题？

Question

textfield组件有一个问题，我尝试过没有样式。 您需要更新

renderinput

Answer 1

检查这个

import React, { useState, useEffect, useCallback, useRef } from "react";
import styled from "@emotion/styled";
import { useCrmIntegrations } from "../../hooks/api/useCrmIntegrations";
import { spacing, SpacingProps } from "@mui/system";
import { Button as MuiButton, TextField as MuiTextField, Typography, Box, Autocomplete } from "@mui/material";
const TextField = styled(MuiTextField)<{ my?: number }>(spacing);

// ***************************** NewApplication Component *****************************
const NewApplication = () => {
  const { searchCompany } = useCrmIntegrations();

  // State Variables
  const [companyName, setCompanyName] = useState("");
  const [searchTerm, setSearchTerm] = useState("");
  const [companyOptions, setCompanyOptions] = useState<any[]>([]);

  // ****************** UseEffect Hook ******************
  const handleCompanySelect = (value: any) => {
    setCompanyName(value.Name);
  };
  function handleSearchResult(responseData: any) {
    setCompanyOptions(responseData);
  }

  // ****************** UseEffect Hook ******************
  useEffect(() => {
    if (searchTerm.length < 3) {
      //setCompanyOptions([]); // clear results if search term too short
      return;
    }
    // Set up a 500ms debounce
    const handler = setTimeout(() => {
      searchCompany(searchTerm, handleSearchResult); // function that will call the API
    }, 500);

    // Cleanup function to cancel the timeout if searchTerm changes before 500ms
    return () => clearTimeout(handler);
  }, [searchTerm]);

  const ApplicationNewContent = (
    <React.Fragment>
      {/* THIS DOESN'T WORK */}
      <Autocomplete
        id="company-search-results"
        inputValue={searchTerm}
        onInputChange={(event, newInput) => setSearchTerm(newInput)}
        options={companyOptions}
        getOptionLabel={(option: any) => option.Name || ""}

        // change in renderinput *****************
        renderInput={(params) => <MuiTextField {...params} label="Search Company" placeholder="Type a company name" />}
        onChange={(event, selectedCompany) => {
          if (selectedCompany) {
            handleCompanySelect(selectedCompany);
          }
        }}
      />

      {/* THIS WORKS */}
      <Box mt={20} p={2} border={1} borderColor="grey.500">
        <Typography variant="h6">Company Options:</Typography>
        <pre>{JSON.stringify(companyOptions, null, 2)}</pre>
      </Box>
    </React.Fragment>
  );

  return ApplicationNewContent;
};

export default NewApplication;