使用 Material UI 的 AutoComplete + react hook 表單時出錯

Question

我正在使用材質 Ui 的組件“自動完成”來呈現多個復選框，並將選擇的選項顯示到 TextField 中。 當我提交表單時發生錯誤。 選中的復選框的值是空的，如下所示： category: "" 似乎 react hook 表單無法識別名稱“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 。 有關詳細信息，請參閱文檔中的此部分。