javascript - 使用 React Hook Form 不会显示验证错误

Question

我正在使用React Hook Form为了验证一些简单的输入:

import React from "react";
import useForm from "react-hook-form";

import "./App.css";

function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div className="App">
      <header className="App-header">
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            className="mkn-input"
            name="firstName"
            placeholder="First name"
            ref={register({
              required: true,
              maxlength: 20,
              message: "invalid first name"
            })}
          />
          <span> {errors.firstName && errors.firstName.message}</span>

          <input
            placeholder="Last name"
            className="mkn-input"
            name="lastName"
            ref={register({
              pattern: /^[A-Za-z]+$/i,
              message: "Invalid last name"
            })}
          />
          {errors.lastName && <span> errors.lastName.message</span>}
          <input
            name="age"
            type="number"
            placeholder="Age"
            className="mkn-input"
            ref={register({ min: 18, max: 99 })}
          />
          <input type="submit" className="mkn-btn" />
        </form>
      </header>
    </div>
  );
}

export default App;

但是我遇到了一个奇怪的问题，在 DOM 中显示错误，我也尝试将它们记录在控制台中，但没有成功，我错过了什么？

完整代码:

Answer 1

您需要在required字段中添加message，或者只是查询是否有错误:

<>
  <input
    name="firstName"
    placeholder="First name"
    ref={register({
      required: 'invalid first name'
    })}
  />
  <span> {errors.firstName && errors.firstName.message}</span>
</>

// Or 
<>
  <input
    placeholder="Last name"
    className="mkn-input"
    name="lastName"
    ref={register({
      required: true,
      pattern: /^[A-Za-z]+$/i
    })}
  />
  {errors.lastName && <span>Invalid last name</span>}
</>

// Or https://react-hook-form.com/advanced-usage#ErrorMessage

function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div className="App">
      <header className="App-header">
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            className="mkn-input"
            name="firstName"
            placeholder="First name"
            ref={register({
              required: 'invalid first name'
            })}
          />
          <span> {errors.firstName && errors.firstName.message}</span>

          <input
            placeholder="Last name"
            className="mkn-input"
            name="lastName"
            ref={register({
              required: true,
              pattern: /^[A-Za-z]+$/i
            })}
          />
          {errors.lastName && <span>Invalid last name</span>}
          <input
            name="age"
            type="number"
            placeholder="Age"
            className="mkn-input"
            ref={register({ min: 18, max: 99 })}
          />
          <input type="submit" className="mkn-btn" />
        </form>
      </header>
    </div>
  );
}