使用 React-Hook-Form 让你的表单天生强大

没有人喜欢创建和重新创建带有验证的复杂表单，包括React开发人员。

在React中构建表单时，必须使用一个表单库，该库提供了许多方便的工具，而且不需要太多代码。

基于实用和简单这两个标准，应用程序最理想的React表单库是 React-hook-form 。

让我们看看如何在你自己的项目中使用 React-hook-form 来为你的React应用程序构建丰富的、有特色的表单。

安装

让我们来讨论一个典型的用例:一个用户注册到我们的应用程序。

对于我们的注册表单，我们将为任何新用户的用户名、密码和电子邮件提供三个输入:

import React from "react";

const styles = {
  container: {
    width: "80%",
    margin: "0 auto",
  },
  input: {
    width: "100%",
  },
};

export default function Signup() {
  return (
    <div style={styles.container}>
      <h4>Sign up</h4>
      <form>
        <input placeholder="Username" style={styles.input} />
        <input placeholder="Email" style={styles.input} />
        <input placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

一旦React项目启动并运行，我们将从安装 React-hook-form库开始:

npm i react-hook-form

使用 useForm hook

要使用 react-hook-form，我们只需要调用 useForm 钩子即可。

当我们这样做的时候，我们将得到一个对象，我们将从中解构register属性。

register是一个函数，我们需要将它连接到每个输入，作为 ref。

function App() {
  const { register } = useForm();

  return (
    <div style={styles.container}>
      <h4>Signup</h4>
      <form>
        <input ref={register} placeholder="Username" style={styles.input} />
        <input ref={register} placeholder="Email" style={styles.input} />
        <input ref={register} placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

register函数将接受用户在每个输入中输入的值，以验证它。Register还将把每个值传递给一个函数，该函数将在提交表单时被调用，下面我们将讨论这个问题。

为了让register正常工作，我们需要为每个输入提供一个适当的name属性。例如，对于用户名输入，它的名称为“username”。

这样做的原因是，当我们提交表单时，我们将获得单个对象上的所有输入值。每个对象的属性都将根据我们指定的输入名称属性进行命名。代码如下：

function App() {
  const { register } = useForm();

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form>
        <input
          name="username"
          ref={register}
          placeholder="Username"
          style={styles.input}
        />
        <input
          name="email"
          ref={register}
          placeholder="Email"
          style={styles.input}
        />
        <input
          name="password"
          ref={register}
          placeholder="Password"
          style={styles.input}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

使用 handleSubmit 提交表单

为了处理提交表单和接收输入数据，我们将在表单元素中添加一个onSubmit，并将其连接到同名的本地函数:

function App() {
  const { register } = useForm();

  function onSubmit() {}

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form onSubmit={onSubmit}>
        <input
          name="username"
          ref={register}
          placeholder="Username"
          style={styles.input}
        />
        <input
          name="email"
          ref={register}
          placeholder="Email"
          style={styles.input}
        />
        <input
          name="password"
          ref={register}
          placeholder="Password"
          style={styles.input}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

从useForm中，我们将获取一个名为handlessubmit的函数，并将其作为一个高阶函数包装在onSubmit周围。

handlessubmit函数将负责收集输入到每个输入中的所有数据，我们将在onSubmit中接收到一个名为data的对象。

现在，如果我们使用 console.log(data)，我们就可以看到我们在同一个属性的每个输入中输入了什么:

function App() {
  const { register, handleSubmit } = useForm();

  function onSubmit(data) {
    console.log(data); 
    // { username: 'test', email: 'test', password: 'test' }
  }

  return (
    <div style={styles.container}>
      <h4>Signup</h4>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="username"
          ref={register}
          placeholder="Username"
          style={styles.input}
        />
        <input
          name="email"
          ref={register}
          placeholder="Email"
          style={styles.input}
        />
        <input
          name="password"
          ref={register}
          placeholder="Password"
          style={styles.input}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

表单验证

验证表单并为每个输入值添加约束非常简单——我们只需要将信息传递给register函数。

register接受一个对象，该对象包含许多属性，这些属性告诉register如何验证给定的输入。

第一个属性是必需的。默认情况下，它被设置为false，但我们可以将其设置为true，以确保没有填写表单时不提交。

我们希望用户名值是必需的，并且希望用户的用户名大于6个字符但小于24个字符。

为了应用这个验证，我们可以将minLength的约束设置为6，但是maxLength应该是20:

<input
  name="username"
  ref={register({
    required: true,
    minLength: 6,
    maxLength: 20,
  })}
  style={styles.input}
  placeholder="Username"
/>

如果我们为这个输入使用数字(假设这个输入是关于人的年龄的)，我们将使用属性min和max而不是minLength和maxLength。

正则表达式

接下来，如果愿意，我们可以提供一个 regex 正则表达式 模式。

如果我们希望用户名只包含大写和小写字符，我们可以使用下面的正则表达式，它允许自定义验证:

<input
  name="username"
  ref={register({
    required: true,
    minLength: 6,
    maxLength: 20,
    pattern: /^[A-Za-z]+$/i,
  })}
  style={styles.input}
  placeholder="Username"
/>

validate

最后是validate，这是一个自定义函数，它允许我们访问输入的值。validate允许我们提供自己的逻辑来确定它是否有效(通过返回布尔值true或false)。

对于这里的电子邮件，我们也希望它是必需的，并且是有效的电子邮件。为了验证这一点，我们可以将输入传递给来自名为 isEmail的库 验证器的函数。

如果输入的是电子邮件，则返回true。否则,错误的:

<input
  name="email"
  ref={register({
    required: true,
    validate: (input) => isEmail(input), // returns true if valid
  })}
  style={styles.input}
  placeholder="Email"
/>

对于password的register函数，我们将required设置为true, minlength设置为6，不设置maxLength:

<input
  name="password"
  ref={register({
    required: true,
    minLength: 6
  })}
  style={styles.input}
  placeholder="Password"
/>

错误提示

现在，如果表单中的输入无效，我们不会告诉用户有任何错误。我们需要给他们反馈来修复他们提供的值。

当其中一个输入无效时，表单数据不会被提交(不会调用onSubmit)。此外，带有错误的第一个输入将自动聚焦，它不会向用户提供关于所发生事情的任何详细反馈。

我们可以从 useForm 中获取一个 errors对象，而不仅仅是不提交表单。

就像我们在 onSubmit 中获得的数据函数一样，errors 包含对应于每个输入名称的属性，如果它有错误的话。

对于我们的示例，我们可以为每个输入添加一个条件，并说如果有错误，我们将把borderColor 设置为红色。

function App() {
  const { register, handleSubmit, errors } = useForm();

  function onSubmit(data) {
    console.log(data);
  }

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="username"
          ref={register({
            required: true,
            minLength: 6,
            maxLength: 20,
            pattern: /^[A-Za-z]+$/i,
          })}
          style={{ ...styles.input, borderColor: errors.username && "red" }}
          placeholder="Username"
        />
        <input
          name="email"
          ref={register({
            required: true,
            validate: (input) => isEmail(input),
          })}
          style={{ ...styles.input, borderColor: errors.email && "red" }}
          placeholder="Email"
        />
        <input
          name="password"
          ref={register({
            required: true,
            minLength: 6,
          })}
          style={{ ...styles.input, borderColor: errors.password && "red" }}
          placeholder="Password"
        />
        <button type="submit" disabled={formState.isSubmitting}>
          Submit
        </button>
      </form>
    </div>
  );
}

验证模式

您会注意到，默认情况下，errors对象 只有在提交表单时才会更新。默认的验证只在提交表单时执行。

我们可以通过给useForm传递一个对象来改变这一点，我们可以在需要执行验证时设置模式:onBlur、onChange或onSubmit。

每当用户’失去焦点’或点击远离输入，onBlur将使验证运行。onChange是用户输入时验证，onSubmit是表单提交时验证。

对于我们的表单，让我们选择 onBlur :

const { register, handleSubmit, errors } = useForm({
  mode: "onBlur",
});

请注意，还有其他方法可以手动设置和清除错误(setError和clearError)。例如，在某些情况下，您希望它在onSubmit中创建一个不同的错误或清除一个错误，就可以使用这些方法。

如何禁用表单的formState

我们可以从useForm钩子中得到的最后一个值是formState。

它为我们提供了重要的信息，比如何时输入了某些内容，以及何时提交了表单。

因此，如果你想禁用表单的按钮，以确保表单没有提交过多次，我们可以将禁用设置为formstate.issubmitted。

提交表单时，它会被禁用直到验证完成运行onSubmit函数。

总结

我希望本文向您展示了如何在React应用程序中更容易地创建功能性表单。

还有很多与react-hook形式相关的特性我没有在这里介绍。点击这里，官方文档应该涵盖你能想到的任何用例。