自动完成 MaterialUI - 如何在分组自动完成中设置默认值

Question

I am using Autocomplete grouped component? I want that a default value already selected when component loads or refresh.

Code is below code

<Autocomplete
    id="grouped-demo"
    className={'input-dropdown'}
    options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
    groupBy={(option) => option.firstLetter}
    getOptionLabel={(option) => option.title}
    onChange={this.linkDropdownChange}
    renderInput={(params) => <TextField {...params} label="grouped Collection" variant="outlined" />}
/>

Answer 1

As per the documentation, you got two options

Controllable states The component has two states that can be controlled:

the "value" state with the value/onChange props combination. This state represents the value selected by the user, for instance when pressing Enter. the "input value" state with the inputValue/onInputChange props combination. This state represents the value displayed in the textbox.

Answer 2

Done!!!!!

Autocomplete grouped component uses defaultValue as object not a string