在 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" />
        )}
      />
    </>
  );
}

告诉我这是否对你有好处