yup - Material ui Checkbox 在 React-hook 表单中不起作用

Question

我想制作一个带有验证的表单，因为我使用了带有 Material UI 的 react-hook-form。对于验证，yup 和钩子/解析器也被使用。当我单击复选框时，我想显示另一个文本字段，但复选框不起作用。watch 用于来自 react-hook-form(useForm) 的内容。我的错误是什么？请帮忙。

这是我的代码：-codesanbox

Answer 1

您必须为 MUI 复选框使用Controlleror useController，例如：

<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

对于那些在 typescript 中使用 MUI5、NextJs 12 和 RHF 7的人来说，这是我如何让它工作的

请注意，在里面RHF Controller而不是相反。还有事项FormControlLabeldefaultValue

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"
      />