Question

不知何故，我的自动完成的默认值没有被选中。只有在您自己从菜单中单击它后才会被选中。

假设这是否可能来自过滤器方法，因为它返回一个新的对象引用，因此无法在菜单内预选？

数据集样本

...
    { icon: '??', name: 'French Polynesia', abbr: 'PF', code: '689' },
    { icon: '??', name: 'French Southern Territories', abbr: 'TF', code: '262' },
    { icon: '??', name: 'Gabon', abbr: 'GA', code: '241' },
    { icon: '??', name: 'Gambia', abbr: 'GM', code: '220' },
    { icon: '??', name: 'Georgia', abbr: 'GE', code: '995' },
    { icon: '??', name: 'Germany', abbr: 'DE', code: '49', suggested: true },
...

自动完成组件

<Autocomplete
    fullWidth
    id="grouped-countries"
    options={options.sort(
        (a, b) => -b.groupLabel.localeCompare(a.groupLabel),
    )}
    defaultValue={
        //Pass Object with name Germany as Default!
        options.filter((obj) => obj.name === 'Germany')[0]
    }
    groupBy={(option) => option.groupLabel}
    noOptionsText="keine passendes Land"
    getOptionLabel={(option) => option.name}
    renderInput={(params) => (
        <TextField
            variant="outlined"
            {...params}
            fullWidth
            label="Land"
            defaultValue={
                //Set Default Input Value to Germany!
                options.filter((obj) => obj.name === 'Germany')[0].name
            }
            className={classes.input}
        />
    )}
    Menu
/>

输出 // 示例

https://codesandbox.io/s/material-ui-autocomplete-fail-7uh04

自动完成不突出默认值

0 个答案: