React Hook Form 条件注册：仅当输入有值时才注册字段

React Hook Form 输入注册的默认行为

在使用 react-hook-form 构建表单时，register 函数是核心。它负责将输入元素注册到表单状态中，使其值可以被 handlesubmit 捕获，并支持验证规则。然而，register 的默认行为是无论输入字段是否有值，都会将其注册到表单状态中。这意味着即使用户未在某个可选字段中输入任何内容，该字段的名称仍可能出现在提交的数据中，其值为空字符串或 undefined。在某些场景下，我们可能希望只有当用户实际输入了有效内容时，才将该字段纳入表单数据。

考虑以下一个简单的表单示例，其中包含一个必填字段和一个可选字段：

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data); // 提交时打印表单数据
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 这是一个带有默认值的可选字段 */}
      <input defaultValue="test" {...register("example")} />

      {/* 这是一个必填字段 */}
      <input {...register("exampleRequired", { required: true })} />
      {errors.exampleRequired && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );
}

在这个例子中，如果用户只填写了 exampleRequired 字段，onSubmit 可能会收到包含 example: "test" 和 exampleRequired: "用户输入" 的数据，或者如果用户清空了 example 字段，它仍可能被注册为空字符串。

解决方案：结合 setValue 实现条件注册

为了实现仅当输入字段有值时才注册它们，我们可以利用 react-hook-form 提供的 setValue 方法，并结合输入元素的 onChange 事件。setValue 允许我们手动设置表单中某个字段的值，并触发相应的更新。通过在 onChange 处理器中检查输入值是否为空（或仅包含空白字符），我们可以决定是否调用 setValue 来更新表单状态。

以下是实现这一逻辑的详细步骤和代码示例：

1. 引入 setValue

首先，我们需要从 useForm hook 中解构出 setValue 方法：

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, formState: { errors }, setValue } = useForm();
  // ... 其他代码
}

2. 创建 handleInputChange 函数

接下来，我们创建一个通用的 handleInputChange 函数，用于处理输入字段的 onChange 事件。这个函数将检查输入值，并根据条件调用 setValue：

MacsMind

电商AI超级智能客服

192

查看详情

  const handleInputChange = (e) => {
    const { name, value } = e.target;

    // 检查输入值是否非空（且不全是空白字符）
    if (value.trim() !== "") {
      // 如果有值，则使用 setValue 注册并设置该字段的值
      setValue(name, value);
    } else {
      // 如果为空，则从表单数据中移除该字段（或设置为 undefined）
      // 这可以通过 setValue(name, undefined, { shouldDirty: true, shouldValidate: true }) 实现
      // 但更常见的是，如果该字段是可选的，当它为空时，我们希望它不出现在最终提交的数据中
      // 默认情况下，如果 register 仍然存在，但 setValue 未被调用，
      // 且该字段没有 default value，它可能不会被包含在 data 中，
      // 或者如果它是必填项，errors 机制会处理。
      // 对于可选字段，如果希望完全不包含在提交数据中，
      // 可以考虑使用 unregister(name) 或确保不设置其值。
      // 对于本教程的目的，我们主要关注 setValue(name, value) 的条件调用。
    }
  };

代码解析：

• e.target 提供了当前触发事件的输入元素。
• name 和 value 分别获取输入字段的 name 属性和当前值。
• value.trim() !== "" 是关键判断。trim() 方法用于移除字符串两端的空白字符（空格、制表符、换行符等），确保即使只输入了空格，也被视为无有效内容。
• 如果 value.trim() 结果不为空字符串，说明用户输入了有效内容，此时调用 setValue(name, value) 将该字段及其值注册到表单状态中。

3. 修改 input 元素

最后，我们将 handleInputChange 函数应用到需要条件注册的 input 元素的 onChange 属性上。注意，{...register("fieldName", { /* rules */ })} 仍然需要保留，因为它负责将输入元素与 react-hook-form 关联起来，处理验证规则、ref 等。onChange 事件会在每次值改变时触发我们的自定义逻辑。

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, formState: { errors }, setValue } = useForm();

  const onSubmit = data => console.log(data);

  const handleInputChange = (e) => {
    const { name, value } = e.target;

    // 检查输入值是否非空（且不全是空白字符）
    if (value.trim() !== "") {
      // 如果有值，则使用 setValue 注册并设置该字段的值
      setValue(name, value);
    } else {
      // 如果值为空，我们不调用 setValue，这样该字段将不会被显式地设置到表单数据中。
      // 对于可选字段，这意味着如果用户清空它，它可能不会出现在最终提交的 data 对象中。
      // 对于必填字段，如果为空，react-hook-form 的验证机制会触发错误。
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 这个字段依然可以按常规方式注册，因为它有默认值，或者我们不关心它的空值 */}
      <input defaultValue="test" {...register("example")} />

      {/* 这个必填字段将使用 onChange 进行条件注册 */}
      <input
        {...register("exampleRequired", { required: true })}
        onChange={handleInputChange} // 添加 onChange 事件处理器
      />
      {errors.exampleRequired && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );
}

通过上述修改，当用户在 exampleRequired 字段中输入内容时，handleInputChange 会被调用，并且只有当输入值不为空时，setValue("exampleRequired", value) 才会执行，将该字段及其值添加到表单状态中。如果用户清空了该字段，setValue 将不会被调用，表单状态中也不会显式地设置 exampleRequired 的值（除非它有默认值或者被其他方式设置）。对于必填字段，如果最终提交时它仍然为空，react-hook-form 的 required: true 验证规则将正常触发错误。

注意事项

1. register 与 setValue 的协同：{...register("fieldName")} 仍然是必要的，它负责将输入元素与 react-hook-form 绑定，处理 ref、验证规则等。onChange 结合 setValue 的方式，实际上是在 register 的基础上，增加了对字段值设置的精细控制。setValue 会更新 react-hook-form 内部的表单状态，并触发组件重新渲染。
2. 必填字段 (required: true) 的处理：即使使用了条件注册，如果字段被标记为 required: true，当用户提交表单时，react-hook-form 仍然会检查该字段是否满足必填条件。如果 setValue 未能为该字段设置值（因为它一直为空），那么验证错误将按预期触发。这种方法主要优化了非必填字段在为空时不被提交到数据中的场景。
3. 默认值 (defaultValue) 的影响：如果一个输入字段有 defaultValue，即使它被 register 了，并且用户没有进行任何修改，react-hook-form 也会在提交时包含这个默认值。如果希望 defaultValue 也能被 handleInputChange 的逻辑控制，可能需要更复杂的逻辑，例如在组件挂载时根据 defaultValue 调用 setValue。
4. 性能考虑：onChange 事件在每次输入改变时都会触发。对于大型表单或高性能要求高的场景，如果 handleInputChange 中包含复杂逻辑，可能需要考虑使用 debounce 或 throttle 来优化。然而，对于大多数常见表单，这种直接的 onChange 处理方式是完全可接受的。

总结

通过巧妙地结合 react-hook-form 的 setValue 方法和输入元素的 onChange 事件处理器，我们可以实现对表单字段的条件注册。这种技术允许我们根据用户输入内容的有效性，动态地决定哪些字段应该包含在最终提交的表单数据中，从而使表单数据更加精简和准确。这对于处理包含大量可选字段的复杂表单尤其有用，有助于优化后端接收到的数据结构。

以上就是React Hook Form 条件注册：仅当输入有值时才注册字段的详细内容，更多请关注php中文网其它相关文章！