在 React Hook 表单中显示来自控制器的错误

Question

我试图从我的输入中抛出所需的错误，我已将其包装在react-hook-form版本 7 的控制器组件中。

我的输入是一个 Material-UI TextField；

<Controller
                        
    name="firstName"
    control={control}
    defaultValue=""
    rules={{ required: true}}
    render={({field}) =>
        <TextField
        id="firstName"
        name="firstName"
        autoComplete="fname"
        variant="outlined"
        fullWidth
        label="First Name"
        autoFocus={true}
        {...field} />
    }
/>

我想在规则失败时暴露错误。

Answer 1

errors您需要将与您的字段名称匹配的对象的属性传递给您的 Material UI <TextField />。该errors对象可通过formState属性获得。

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

您还应该将 传递ref给inputRefprop，而不是将其设置为refprop。<TextField />如果提交时出现错误，这将自动聚焦输入。

<Controller
  name="firstName"
  control={control}
  defaultValue=""
  rules={{ required: true }}
  render={({ field: { ref, ...field } }) => (
    <TextField
      {...field}
      inputRef={ref}
      id="firstName"
      autoComplete="fname"
      variant="outlined"
      fullWidth
      error={!!errors.firstName}
      label="First Name"
    />
  )}
/>