reactjs - React-hook-form 输入字段匹配验证最佳实践

Question

在处理 React-hook-form 时进行输入字段匹配验证的最佳实践是什么？例如，当匹配 email 输入等时。

在使用 React-hook-form 查看电子邮件匹配验证时，在尝试通过验证方法将错误消息与“耦合元素”分开时发现了一个问题。 ref 只带一个参数，用于 React-hook-form register ，同时需要使用 useRef 访问 current.value 进行值匹配，如下:

import React, { useRef } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, errors } = useForm();
  const inputEmail = useRef(null)
  const onSubmit = data => {
    console.log('onSubmit: ', JSON.stringify(data))
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email</label>
      <input
        name="email"
        type="email"
        ref={inputEmail}
      />
      {/* desired: show `email` error message */}
      <label htmlFor="email">Email confirmation</label>
      <input
        name="emailConfirmation"
        type="email"
        ref={register({
          validate: {
            emailEqual: value => (value === inputEmail.current.value) || 'Email confirmation error!',
          }
        })}
      />
      {errors.emailConfirmation && <p>{errors.emailConfirmation.message}</p>}
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

虽然这种模式在进行输入字段匹配时似乎是一种选择，但它与 React-hook-form 并不能很好地配合!

例如，错误消息仅与一个输入案例耦合，并且每个独立字段没有单独的消息，或者输入字段之一没有分配给它的寄存器，这意味着未设置属性 required 等。

所以，我正在寻找一个好的实践或模式来解决:

保持错误消息由输入字段分隔

验证方法，在测试匹配时应该能够以符合 React 的方式引用孪生字段值而不是
通过 DOM(document.querySelector 等)

Answer 1

您不应该需要 inputEmail 的手册引用。相反，使用 getValues 方法来获取整个表单的当前值。

const { register, getValues } = useForm()

然后您注册两个输入并从您的自定义验证中调用 getValues。

  <input
    name="email"
    type="email"
    ref={register}
  />
  <input
    name="emailConfirmation"
    type="email"
    ref={register({
      validate: {
        emailEqual: value => (value === getValues().email) || 'Email confirmation error!',
      }
    })}
  />