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

92vpleto 于 2023-03-22 发布在 React

关注(0)|答案(2)|浏览(145)

我正在使用材料Ui的组件AutoComplete渲染多个Checkbox，并将选中的选项显示到TextField中，提交表单时出现错误，选中的Checkbox值为空，如下所示：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" />}
      />
    }
/>

reactjs

来源：https://stackoverflow.com/questions/67575070/error-using-autocomplete-of-material-ui-react-hook-form

2条答案

按热度按时间

4dc9hkyq1#

您需要使用React Hook Form提供的Controller组件 Package Material UI Autocomplete。有关详细信息，请参阅文档中的此部分。

赞(0）回复(0）举报 2023-03-22

xdyibdwo2#

以下是为多个值设置自动完成的正确方法：

multiple添加多个值，
options：添加要选择的选项
getOptionLabel：显示选项的标签
onChange：使用react-hook-form的onChange函数设置所选值
renderInput：渲染输入

import { useForm, Controller } from 'react-hook-form'
import {
  Box,
  TextField,
  Autocomplete,
} from '@mui/material'

const {
  ...
  control,
  formState: { errors },
} = useForm()

<Box mt={2}>
  <Controller
    control={control}
    name="industries"
    rules={{
      required: 'Veuillez choisir une réponse',
    }}
    render={({ field: { onChange } }) => (
      <Autocomplete
        defaultValue={
          useCasesData?.industries
            ? JSON.parse(useCasesData?.industries)
            : []
        }
        multiple
        disableCloseOnSelect
        options={companyIndustryTypes}
        getOptionLabel={(option) => option.name}
        onChange={(event, values) => {
          onChange(values)
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Type d'industries"
            placeholder="Type d'industries"
            helperText={errors.industries?.message}
            error={!!errors.industries}
          />
        )}
      />
    )}
  />
</Box>

注意，在我的例子中，companyIndustryTypes是一个对象数组：

[
    {
        id: 1,
        name: "Accounting",
    },
    {
        id: 2,
        name: "Administration & Office Support",
    },
    ...
]

赞(0）回复(0）举报 2023-03-22

我来回答

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

2条答案

相关问题

热门标签

最新问答