Material UI react js中自动完成组件中的默认选择

Question

我有来自react material ui的自动完成输入。

当用户来编辑此输入时，我正在尝试设置一个默认的选定值。

我可以通过getOptionSelected选择该选项，但该选项的名称没有显示。

<Autocomplete
value={form && form.productID}
options={categories && categories}
getOptionDisabled={(option) =>
option.partnerId && !option.isApproved
}

getOptionSelected={(option, value) => value === option._id}
getOptionLabel={(option) => option.name}
renderOption={(option) => (
<Grid container justify="space-between">
{option.name}
</Grid>
)}
renderInput={(params) => (
<TextField {...params} label="Products" variant="outlined" />
)}
/>

如何创建默认的选定值，注意：我需要网格中的renderOption，因为我正在使用renderOption 中的一些芯片、工具提示

我的终点像这个

{
"data": [
{
"_id": "5f659a5d1407c6729c71f833",
"name": "Mutton",
},
{
"_id": "5f659a1a1407c6729c71f832",
"name": "Chicken",
},
{
"_id": "5f6599d41407c6729c71f831",
"name": "Fish",
}
]

}

Answer 1

如果要给定默认值，则需要设置defaultValue属性。

<Autocomplete
value={form && form.productID}
options={categories && categories}
getOptionDisabled={(option) =>
option.partnerId && !option.isApproved
}

getOptionSelected={(option, value) => value === option._id}
getOptionLabel={(option) => option.name}
renderOption={(option) => (
<Grid container justify="space-between">
{option.name}
</Grid>
)}
renderInput={(params) => (
<TextField {...params} label="Products" variant="outlined" />
)}
defaultValue={you default goes here}
/>