Javascript 使用React Hook表单未显示验证错误

我使用来验证一些简单的输入：

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;

从“React”导入React；
从“react hook form”导入useForm；
导入“/App.css”；
函数App（）{
常量{register，handleSubmit，errors}=useForm（）；
const onSubmit=data=>{
控制台日志（数据）；
};
返回(
{errors.firstName&&errors.firstName.message}
{errors.lastName&&errors.lastName.message}
);
}
导出默认应用程序；

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

完整代码：

---

您需要在

所需

字段中添加

消息

，或者只需查询是否有错误：

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

{errors.firstName&&errors.firstName.message}
//或
{errors.lastName&&Invalid lastName}
//或https://react-hook-form.com/advanced-usage#ErrorMessage

函数应用程序（）{
常量{register，handleSubmit，errors}=useForm（）；
const onSubmit=data=>{
控制台日志（数据）；
};
返回(
{errors.firstName&&errors.firstName.message}
{errors.lastName&&Invalid lastName}
);
}

---

您需要在

所需

字段中添加

消息

，或者只需查询是否有错误：

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

{errors.firstName&&errors.firstName.message}
//或
{errors.lastName&&Invalid lastName}
//或https://react-hook-form.com/advanced-usage#ErrorMessage

函数应用程序（）{
常量{register，handleSubmit，errors}=useForm（）；
const onSubmit=data=>{
控制台日志（数据）；
};
返回(
{errors.firstName&&errors.firstName.message}
{errors.lastName&&Invalid lastName}
);
}