• useForm（{ shouldUnregister：}）;

当使用react-hook-form时，每个表单元素都是在一个标签变化或其他情况下呈现的，使用上面的代码不要让任何字段从表单中注销，并保持表单值不变。

1.发送一个引用到组件（阅读Register fields了解更多信息）
1.使用先前的值设置defaultValue。在每个重新呈现组件中，在其输入中使用默认值。
在codesandbox上查看this。

当输入从DOM树中删除时，React Hook Form会自动删除值，基本上，当输入被折叠时，unregister会被调用。

解决方案

useEffect(() => {
  register('yourInput');
}, [register])

setValue('yourInput', 'data')

这个unregister不会自动发生，您可以在调用unregister时驱动。

这一方法：
在主视图中：

const methods = useForm(form)
const [value, setValue] = useState(0)

<FormProvider {...{value, ...methods}}>

</FormProvider>

选项卡项目示例：

// first item 
const TabItem1 = () => {
    const {value} = useFormContext()

    return <TabPanel {...{value, index: 0}}>
      {/*{Content here}*/}
    </TabPanel>
}

export default TabItem1

// second item
const TabItem2 = () => {
    const {value} = useFormContext()

    return <TabPanel {...{value, index: 1}}>
      {/*{content here}*/}
    </TabPanel>
}

export default TabItem2

和TabPanel：

const TabPanel = ({children, value, index}) =>
    <div style={{display: value === index ? 'block' : 'none'}}>
        {children}
    </div>

export default TabPanel

我使用stepper输入用户信息，分为4个步骤和useForm（{ shouldUnregister：false }）; didn't work so I Changed this：

{activeStep === 0 && (
            <label>
              Name:
              <input type="text" name="name"  />
            </label>
          )}

收件人：

<label>
            Name:
            <input
              type="text"
              name="name"
              style={{ display: activeStep === 0 ? "block" : "none" }}
            />
 </label>