6

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

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

看看下面的示例代码

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

任何努力都受到高度赞赏

4

4 回答 4

6

useForm({ shouldUnregister: false });

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

于 2021-03-03T11:13:37.663 回答
0

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

解决方案

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


setValue('yourInput', 'data')

这unregister不会自动发生，您可以决定何时调用unregister.

于 2020-04-23T07:58:56.087 回答
0
  1. 向组件发送参考（阅读注册字段以获取更多信息）
  2. 使用以前的值设置 defaultValue。在每个重新渲染组件中，在其输入中使用默认值。

看看这个在代码沙盒。

于 2020-04-23T07:02:53.633 回答
0

这有效：

在主视图中：

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
于 2021-03-07T20:44:38.610 回答