Question

所以我创建了一个自定义输入包装器，它从 react-hook-form 中接收一些道具。

这是我的文字输入

import { useForm } from 'react-hook-form'

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

<TextInput
  id={'password'}
  errors={errors}
  register={register}
  options={{
    minLength: {
      message: 'Please pick password longer than 8 characters',
      value:   8,
    },
    required: 'Password is required',
  }}
  type={"password"}
  placeholder={'Enter password'}
/>

在我的组件中，我传入这些道具，如果不满足选项中的任何条件，我会尝试显示错误消息。

<div>
  <input
    error={errors[id] ? true : false}
    placeholder={placeholder}
    type={type}
    {...register(id, options)}
  />
  {
    errors[id] &&
      <div>
        { errors[id].message }
      </div>
  }
</div>

错误仅在我提交之前的表单并更新文本字段时出现，如何让它们在提交时出现？

Answer 1

您没有显示表单的结构，但你可以这样做：

import "./styles.css";
import { useForm } from "react-hook-form";

const TextInput = ({errors, placeholder, type, id, register, options}) => {
  return (
    <div>
      <input
        // error={errors[id] ? true : false}
        placeholder={placeholder}
        type={type}
        {...register(id, options)}
      />
      {
        errors[id] &&
          <div>
            { errors[id].message }
          </div>
      }
    </div>
  )
}

export default function App() {
  const {
    register, 
    handleSubmit,
    formState: { 
      errors 
    }
  } = useForm();

  const onSubmit = data => {
    console.log(data);
  }

  return (

      <form onSubmit={handleSubmit(onSubmit)}>
        <TextInput
          id={'password'}
          errors={errors}
          register={register}
          options={{
            minLength: {
              message: 'Please pick password longer than 8 characters',
              value:   8,
            },
            required: 'Password is required',
          }}
          type={"password"}
          placeholder={'Enter password'}
        />
        <button>submit</button>
      </form>
    
  )
  
}

这是一个sandBox

注意：
如果您的表单是嵌套的，您可以使用 useformcontext
您可以在 docs

以反应钩子形式更新错误

1 个答案: