我正在使用材质 Ui 的组件“自动完成”来呈现多个复选框,并将选择的选项显示到文本字段中。 提交表单时发生错误。选中的复选框的值为空,如下所示: category: "" 似乎反应钩子形式无法识别名称“类别”,如下所示:
<Autocomplete
id="checkboxes-tags-demo"
fullWidth
multiple
limitTags={2}
getOptionLabel={(option) => option.title}
disableCloseOnSelect
noOptionsText="Nenhuma opção foi encontrada"
variant="outlined"
options={newCategories}
renderOption={(option, {selected}) => {
return (
<Box key={option.id} ml={option?.isSub ? 3 : 0}>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
checked={selected}
/>
{option.title}
</Box>
)
}
}
renderInput={(params) =>
<TextField
name="category"
inputRef={register}
{...params}
label="Selecione a categoria"
variant="outlined" />}
/>
}
/>
答案 0 :(得分:1)
您需要使用 React Hook Form 提供的 Autocomplete
组件包装 Material UI Controller
。有关详细信息,请参阅文档中的此 section。