使用 Material UI + React hook 表单的自动完成时出错

Question

我正在使用 material Ui 的组件 'AutoComplete' 呈现多个复选框，并将选择的选项显示到 TextField 中。当我提交表单时发生错误。选中的复选框的值为空，像这样：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" />}
      />
    }
/>

Answer 1

你需要用 React Hook Form 提供的 Controller 组件包裹 Material UI Autocomplete。有关详细信息，请参阅文档中的 section。

使用 Material UI + React hook 表单的自动完成时出错

Error using AutoComplete of Material UI + react hook form

reactjs

autocomplete

material-ui

react-hook-form