当我折叠，添加或删除面板时，React-hook-form 字段值丢失

Question

我正在使用材料 ui ExpansionPanel。我正在尝试从添加按钮单击添加新面板并从删除按钮单击中删除面板，它工作正常，问题是，当我展开、折叠、添加或删除面板时，表单字段值会丢失。我认为这是由于重新渲染或刷新而发生的。

让我知道我们如何实现上述功能，以便用户可以轻松导航到任何面板，从那里添加一些细节，然后移动到另一个面板并在那里添加一些细节，但是当从一个面板添加细节到另一个面板时，如果用户再次转到那个特定的面板。

看看下面的示例代码

https://codesandbox.io/s/dhananajayx-3n73x?file=/src/App.js:146-160

任何努力都受到高度赞赏

Answer 1

useForm({ shouldUnregister: false });

当使用react-hook-form并且每个表单元素在选项卡更改等上呈现时，使用上面的代码不让任何字段从表单中取消注册并保持表单值不变。

Answer 2

1. 向组件发送引用（阅读注册字段以获取更多信息）
2. 将 defaultValue 设置为之前的值。每个重新渲染组件在其输入中都使用默认值。

在codesandbox 上看看这个。