react-hook-form：如果未安装，如何从提交数据中删除项目（在默认值中提到）。试过注销它不工作

Question

我有 firstName 和 lastName 的简单形式。我在 useForm 中添加了一些 defaultValues。我还没有使用 if 条件安装 lastName。

现在，当我尝试提交时，我希望它只显示已安装的组件值，即 firstName。但它同时显示 firstName 和 lastName。我已经创建了一个按钮来尝试 unregister("lastName") 但即使在取消注册并且没有被安装之后它也会显示在提交数据中。

如果我不提供 defaultValues 那么它会很好地工作，就像如果最初没有安装它不会显示在提交数据中一样。

代码如下

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

import "./styles.css";

const App = () => {
  const { register, handleSubmit, unregister, watch } = useForm({
    defaultValues: {
      firstName: "test",
      lastName: "test2"
    }
  });

  const onSubmit = (data) => {
    console.log("ON SUBMIT");
    console.log(JSON.stringify(data, null, 4));
  };


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Last Name</label>
      <input {...register("firstName")} />
      {false && (
        <>
          <label>Last Name</label>
          <input {...register("lastName")} />
        </>
      )}
      <button
        type="button"
        onClick={() => {
          console.log("unregistering lastName")
          unregister("lastName");
        }}
      >
        unregister lastName
      </button>
      <input type="submit" />
    </form>
  );
};

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

还有 codesandbox

Answer 1

首先，你不能用unregister("lastName");之前register("lastName");没用。其次，当您使用 defaultValues 时，方法 unregister 不会删除它们，而只是将值设置为默认值。没有unregister就可以按条件过滤提交数据。 Demo

react-hook-form：如果未安装，如何从提交数据中删除项目（在默认值中提到）。试过注销它不工作

react-hook-form: how to remove the item (which is mentioned in defautvalue) from submit data if its not mounted. Tried unregister its not working

react-hook-form