使用 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

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

<>

  <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>

  );

}