MUI 5 Autocomplete如何配置选中对象指定属性作为返回值

MUI 5的Autocomplete默认onChange回调返回匹配到的完整选项对象，你当前代码直接把返回对象存入state，自然拿到的是完整结构。MUI 5已经移除了MUI 4版本的getOptionSelectedAPI，替换为isOptionEqualToValue做值匹配判断，要实现选中后仅存VaccinationType字符串值，改3处逻辑即可：

• 调整onChange取值逻辑：选中选项后，提取对象内的VaccinationType字段存入state，清空选择时存空字符串
• 调整getOptionLabel逻辑：同时兼容入参是选项对象（渲染下拉选项时）、入参是字符串（回显state存储值时）两种场景，避免取值报错
• 调整isOptionEqualToValue逻辑：适配state存字符串的场景，只要选项的VaccinationType字段和当前绑定的字符串值相等，就判定为选中项

修改后的完整代码如下：

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

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

<Autocomplete
    value={vacType}
    onChange={(e, value) => {
        const selectedValue = value?.VaccinationType || '';
        console.log(selectedValue); // 此处打印的就是纯字符串值
        setVacType(selectedValue);
    }}
    options={options}
    getOptionLabel={(option) => {
        // 回显时入参是字符串直接返回，下拉渲染时入参是对象取对应字段
        return typeof option === 'string' ? option : option.VaccinationType;
    }}
    isOptionEqualToValue={(option, value) => {
        // 绑定值是字符串时直接和选项字段比对
        if (typeof value === 'string') return option.VaccinationType === value;
        // 兜底兼容值为对象的边界场景
        return option.VaccinationType === value?.VaccinationType;
    }}
    renderInput={(params) => (
            <TextField
                {...params}
                variant="outlined"
                size="small"
            />
    )}
/>

改完后state里存储的vacType就是纯字符串格式，选中回显、选项匹配逻辑都能正常运行。

内容的提问来源于stack exchange，提问作者Ryan Garde