Флажок Material ui не работает в форме React-hook

Question

Я хочу создать форму с проверкой того, что я использовал форму реакции-крючка с пользовательским интерфейсом материала. А для проверки также используются yup и hook / resolver. когда я нажимаю флажок, я хочу показать другое текстовое поле, но флажок не работает. watch используется для того, что происходит от формы реакции-крючка (useForm). в чем моя ошибка? плз, помогите.

Вот мой код: - codeanbox

Answer 1

Вы должны использовать Controller или же useController для флажка MUI, например:

      <Controller
    name="hasPhone"
    control={control}
    render={({ field }) => (
      <FormControlLabel
        control={
          <Checkbox
            defaultValue={data.hasPhone}
            defaultChecked={data.hasPhone}
            color="primary"
            onChange={(e) => field.onChange(e.target.checked)}
            checked={field.value}
          />
        }
        label="Do you have a phone"
      />
    )}
  />

👉🏻 https://codesandbox.io/s/practical-morning-v6yp1

Answer 2

для тех, кто борется с MUI5, NextJs 12 и RHF 7 в машинописном тексте, вот как я заставляю его работать

Обратите внимание, что RHF Controllerнаходится внутриFormControlLabelа не наоборот. Так же defaultValue имеет значение

      import { FormControlLabel } from "@mui/material";
import Checkbox, { CheckboxProps } from "@mui/material/Checkbox";
import { Control, Controller } from "react-hook-form";

type ICheckBoxFieldProps = CheckboxProps & {
  name: string;
  control: Control;
  label: string;
};

const CheckBoxField: React.FC<ICheckBoxFieldProps> = ({
  name,
  control,
  label,
  defaultChecked,
  ...rest
}: ICheckBoxFieldProps): JSX.Element => {
  return (
    <FormControlLabel
      label={label}
      control={
        <Controller
          name={name}
          control={control}
          defaultValue={!!defaultChecked}
          render={({ field }) => (
            <Checkbox
              checked={field.value}
              onChange={field.onChange}
              {...rest}
            />
          )}
        />
      }
    />
  );
};

export default CheckBoxField;

и как вызвать его внутри формы или FormProvider

      <CheckBoxField
        name="istrue"
        control={control}
        defaultChecked={true}
        label="isTrue"
        color="success"
      />