javascript - 在 React Hook 表单中显示来自 Controller 的错误

Question

我试图从我的输入中抛出所需的错误，这些错误已包装在 react-hook-form 的 Controller 组件中版本 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属性(property)。

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

您还应该通过 ref到 inputRef prop 而不是将其设置为 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"
    />
  )}
/>