材料 ui 复选框在 React-hook 形式下不起作用

问题描述

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

这是我的代码：- codesanbox

解决方法

您必须将 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