react-hook-form：如果未呈现组件，如何删除数据值？

Question

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

<form onSubmit={handleSubmit(onSubmit)}>
    <input defaultValue="test001" {...register("var001")} />
    {somecondition && (
        <>
            <input defaultValue="test002" {...register("var002")} />
            <input defaultValue="test003" {...register("var003")} />
        </>
    )}
  <input type="submit" />
</form>

我有以下反应钩子形式。

我希望 console.log(data) 仅打印呈现的元素。

所以如果 somecondition 不是 true

我想在console.log(data)

中看到

data = {
     "var001": "test001"
}

所以如果 somecondition 是 true

我想在console.log(data)

中看到

data = {
     "var001": "test001"
     "var002": "test002",
     "var003": "test003",
}

我该怎么做

https://codesandbox.io/s/react-hook-form-get-started-forked-55q98

正在显示图像

Answer 1

您可以将 shouldUnregister 设置为 true 以告诉 RHF 在卸载组件时删除该字段。此属性最初在 v7 中被删除，但在较新版本中再次添加，因此您需要将 RHF 更新到最新版本 7 才能使用它：

npm i react-hook-form@latest

const { register, handleSubmit, watch } = useForm({
  defaultValues: {
    var001: 'test001',
    var002: 'test002',
    var003: 'test003',
  },
  shouldUnregister: true,
});

Answer 2

如果array中的条件为true，您可以添加所有要显示的字段。如果 setShow 函数中的条件为 false，则可以方便地操作它们和 unregister 需要的字段。我给你写了例子。

Demo

react-hook-form：如果未呈现组件，如何删除数据值？

react-hook-form: How to remove the data values if the components are not rendered?

reactjs

react-hook-form