Как использовать Material-UI Select с формой React Hook

Question

Я создал форму в React, используя MUI и React Hook Form. Я пытаюсь создать настраиваемый элемент TextField , который работает как Select Input . Я бы хотел, чтобы это был неконтролируемый компонент с опорой Ref . Я попытался передать свойство inputRef, как рекомендуют документы MUI и React Hook Form, но безуспешно.

            <TextField
              id="id"
              name="name"
              select
              native="true"
              className={classes.textField}
              label="label"
              margin="normal"
              variant="outlined"
              inputRef={register({ required: "Choose one option" })}
              error={!!errors.name}
            >
              <MenuItem value="">Choose one option</MenuItem>
              <MenuItem value="3">03</MenuItem>
              <MenuItem value="6">06</MenuItem>
              <MenuItem value="9">09</MenuItem>
              <MenuItem value="12">12</MenuItem>
              <MenuItem value="16">16</MenuItem>
              <MenuItem value="18">18</MenuItem>
            </TextField>

Я обнаружил, что если я использую родной select с ref , он работает нормально.
Кроме того, я попытался изменить свойство inputRef на SelectProps один, но он тоже не сработал.

Заранее благодарю

Answer 1

Используя компонент Select из Material-ui с формой реагирования, вам нужно реализовать собственный лог c с помощью контроллера https://react-hook-form.com/api#Controller

Вот компонент многократного использования, который, надеюсь, упростит код для использования этого компонента Select в вашем приложении:

import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import { Controller } from "react-hook-form";

const ReactHookFormSelect = ({
  name,
  label,
  control,
  defaultValue,
  children,
  ...props
}) => {
  const labelId = `${name}-label`;
  return (
    <FormControl {...props}>
      <InputLabel id={labelId}>{label}</InputLabel>
      <Controller
        as={
          <Select labelId={labelId} label={label}>
            {children}
          </Select>
        }
        name={name}
        control={control}
        defaultValue={defaultValue}
      />
    </FormControl>
  );
};
export default ReactHookFormSelect;

Вы можете использовать его в своем приложении следующим образом:

           <ReactHookFormSelect
              id="numero_prestacao"
              name="numero_prestacao"
              className={classes.textField}
              label="Em quantas parcelas?"
              control={control}
              defaultValue={numero_prestacao || ""}
              variant="outlined"
              margin="normal"
            >
              <MenuItem value="">Escolha uma opção</MenuItem>
              <MenuItem value="3">03 parcelas</MenuItem>
              <MenuItem value="6">06 parcelas</MenuItem>
              <MenuItem value="9">09 parcelas</MenuItem>
              <MenuItem value="12">12 parcelas</MenuItem>
              <MenuItem value="16">16 parcelas</MenuItem>
              <MenuItem value="18">18 parcelas</MenuItem>
            </ReactHookFormSelect>

Вот ваш codeSandBox, обновленный с помощью этого компонента для выбора в Информационной форме:

https://codesandbox.io/s/unit-multi-step-form-kgic4?file= / src / Register / Information.jsx: 4406-5238