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

Question

我试图从我的输入中抛出所需的错误，这些错误已包装在 react-hook-form 版本 7 的 Controller 组件中。

我的输入是 Material-UI 文本字段；

<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 传递给 inputRef 属性，而不是将其设置为 ref 属性。如果提交时出现错误，这将自动聚焦 <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"
    />
  )}
/>

Answer 2

@knoefel 所说的有效。您可以做的另一件事是使用 fieldState。见官方文档here.

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

然后用 error 你会得到错误对象。所以你可以使用 {error?.message} 来显示错误信息。

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

Show Error From Controllers in React Hook Forms

javascript

reactjs

material-ui

react-hook-form