MUI 5 自动完成选择属性 object 作为值

Question

My options looks like this

const options = [
  {
    "VaccinationType": "Sample"
  },
  {
    "VaccinationType": "Another Sample"
  }
]

Code:

const [vacType, setVacType] = useState('');

<Autocomplete
    value={vacType}
    onChange={(e, value) => {
        console.log(value);
        setVacType(value);
    }}
    options={options}
    getOptionLabel={(option) => option.VaccinationType}
    isOptionEqualToValue={(option, value) => option.VaccinationType === value.VaccinationType}
    renderInput={(params) => (
            <TextField
                {...params}
                variant="outlined"
                size="small"
            />
    )}
/>

I tried logging my value it still outputs the object { VaccinationType: "Sample" } . I want it to only output "Sample"

In MUI 4 I'm using this getOptionSelected={(option, value) => option?.VaccinationType === value?.VaccinationType}

Answer 1

Autocomplete options care about the item of the array which you put. According to your code, each item has all object values. I searched to find a way but I couldn't.

There is a way probably you already thought;

You can edit options parameter like options={options.map(o => o.VaccinationType)} and remove VaccinationType key on getOptionLabel and isOptionEqualToValue

<Autocomplete
    value={vacType}
    onChange={(e, value) => {
      console.log(value);
      setVacType(value);
  }}
    options={options.map(o => o.VaccinationType)}
    getOptionLabel={(option) => option}
    isOptionEqualToValue={(option, value) =>
      option === value
    }
    renderInput={(params) => (
      <TextField {...params} variant="outlined" size="small" />
    )}
  />

Answer 2

So I think u forgot to use onInputChange and InputValue properties for MUI Autocomplete, according to https://mui.com/material-ui/react-autocomplete/ these properties are needed in this case here u can read more https://mui.com/material-ui/api/autocomplete/ so please check this solution which works for me:

const [vacType, setVacType] = useState<any>('Sample')
const [inputValue, setInputValue] = useState('Sample')
const options: any[] = [
    {
        VaccinationType: 'Sample'
    },
    {
        VaccinationType: 'Another Sample'
    }
]

<Autocomplete
    value={vacType} //here u set default Value and change whenever it changes a list choice
    inputValue={inputValue} //here u set default Input and change whenever it changes by typing
    onChange={(event: any, newValue: any | null) => {
        setVacType(newValue)
    }}
    onInputChange={(event, newInputValue) => {
        setInputValue(newInputValue)
    }} // handles typing
    options={options}
    getOptionLabel={(option: { VaccinationType: string }) => {
        return option?.VaccinationType
    }}
    isOptionEqualToValue={(option, value) =>
        option?.VaccinationType === value?.VaccinationType
    }
    renderInput={params => (
        <TextField {...params} variant="outlined" size="small" />
    )}
/>

Hope it helps. Also to answer your problem with console.log

your code:

onChange={(e, value) => {
    console.log(value);
    setVacType(value);
}}

exchanged to:

onChange={(event: any, newValue: any | null) => {
    console.log('newValue')
    console.log(newValue)
    setVacType(newValue)
}}

gives object but you on this Autocomplete provide objects then seting values is in objects so u just need to add console.log(newValue.VaccinationType) but not for setVacType(newValue) and Autocomplete will remember last choice

Answer 3

I don't know why you want to do that!,
You can simply use value object wherever you want, and use any key of the object, take the value object as it's then use value.VaccinationType .

But, if you want to do this:

<Autocomplete
    {...props}
    value={options.find(op => op.VaccinationType === vacType)}
    onChange={(e, value) => {
        console.log(value);                   //Result: { "VaccinationType": "Sample" }
        setVacType(value.VaccinationType);    // <==== Here, add `.VaccinationType`
    }}
/>