在 MUI 的自動完成中顯示與所選值不同的選項

Question

你好你好 StackOverflow。 今天我有一個急需解決的問題。

因此，過去一周我一直在努力使這項工作發揮作用，但無濟於事。

所以我面臨的問題是我正在嘗試使用 MUI 的自動完成組件進行自動完成，但我希望它的行為有所不同。

我希望它顯示自動完成選項，當您單擊它們時，它不會使用 label 值，而是使用 id 值。 但我也希望它也能夠接受手動輸入。 因此，例如復制內容，或者只是將其寫入而不是選擇自動完成選項。

到目前為止，這是我在代碼方面嘗試過的：

    const [callNumber, setCallNumber] = useState("")
    const updateCallNumber = (_event: React.SyntheticEvent<Element, Event>, value: any) => {
      console.log(value.number)
      setCallNumber(value.number)
    }

        <Autocomplete
        id="free-solo-demo"
        freeSolo
        onChange={updateCallNumber}
        value={callNumber}
        options={contactsData}
        getOptionLabel={(option) => option.name}
        isOptionEqualToValue={(option, value) => option.name === value.name}        
        renderInput={(params) => <TextField 
          {...params} 
          label="Number" 
          variant="standard"
          InputProps={{
            ...params.InputProps,
            startAdornment: (
              <>
              <InputAdornment position="start">
                <CallIcon />
              </InputAdornment>
              {params.InputProps.startAdornment}
              </>
            )
            }}
          />
        }
      />

PS contactsData 是一個數組，由 ID, Name, Number 組成

感謝您的閱讀，並致以親切的問候

克勞斯。

Answer 1

您需要使用 inputValue（Autocomplete 的屬性）來顯示您想要的值並保留 onChange 和值。

我編寫了一個您可以嘗試的示例：

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

export const friends = [
  { value: "Etienne", inputProps: "toto" },
  { value: "Deborah", inputProps: "tata" },
  { value: "Geneviève", inputProps: "titi" },
];

const initialState = { value: "", inputProps: "" };

export default function ControllableStates() {
  const [selected, setSelected] = useState(initialState);

  const getFirendsValue = () => {
    return friends.map((friend) => friend.value);
  };

  const getFriendSelecter = (value) => {
    return friends.filter((item) => item.value === value);
  };

  const handleChange = (newValue) => {
    if (newValue === null) {
      return setSelected(initialState);
    }
    const newState = getFriendSelecter(newValue);
    return setSelected(...newState);
  };

  return (
    <>
      <Autocomplete
        disablePortal
        id="demo"
        options={getFirendsValue()}
        value={selected.value}
        inputValue={selected.inputProps}
        sx={{ width: 300 }}
        onChange={(e, newValue) => handleChange(newValue)}
        renderInput={(params) => (
          <TextField {...params} label="Recommandé par" />
        )}
      />
    </>
  );
}

告訴我這是否對你有好處