React Hook Form：优化表单输入，仅当字段有值时进行注册

import { useForm } from "react-hook-form";
import React from "react"; // 确保 React 已导入

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setValue,
    unregister, // 引入 unregister 方法
  } = useForm();

  const onSubmit = (data) => {
    console.log("提交的表单数据:", data);
  };

  // 定义处理输入变化的函数
  const handleInputChange = (e) => {
    const { name, value } = e.target;

    // 检查输入值是否非空且不全是空白字符
    if (value.trim() !== "") {
      // 如果有有效值，则通过 setValue 确保其被注册并设置值
      setValue(name, value);
    } else {
      // 如果值为空或全是空白，则取消注册该字段，使其不出现在提交数据中
      unregister(name);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>条件注册输入字段示例</h2>

      {/* 这是一个普通注册的字段，无论是否有值都会被注册 */}
      <label>
        普通输入字段 (默认注册):
        <input defaultValue="初始值" {...register("example")} />
      </label>
      <br /><br />

      {/* 这是一个需要条件注册的字段 */}
      <label>
        条件注册输入字段 (仅当有值时):
        {/* 注意：此处仍然使用 register 来连接输入，但 unregister 会在值为空时移除其状态 */}
        <input
          {...register("exampleConditional", { required: true })} // 仍然可以保留 required 验证
          onChange={handleInputChange} // 绑定自定义的 onChange 事件处理器
          placeholder="请输入内容"
        />
      </label>
      {errors.exampleConditional && (
        <p style={{ color: "red" }}>此字段为必填项。</p>
      )}
      <br /><br />

      <input type="submit" value="提交表单" />
    </form>
  );
}