使用自动完成 Material UI + 响应钩子表单时出错

时间:2021-05-17 18:17:31

标签: reactjs autocomplete material-ui react-hook-form

我正在使用材质 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" />}
      />
    }
/>

1 个答案:

答案 0 :(得分:1)

您需要使用 React Hook Form 提供的 Autocomplete 组件包装 Material UI Controller。有关详细信息,请参阅文档中的此 section

Edit React Hook Form - MUI Autocomplete