动态呈现的嵌套输入失去其价值

Question

我是 react-hook-form 的新手，发现了一些我似乎无法避免的事情。当动态呈现组件时，其嵌套输入组件的值不保持它们的值。

我的组件结构是：

  ParentComponent
    --> ChildComponent(s)
      --> Controller component (supplied via react-hook-library)

我可以通过将所有代码放入一个组件并使用 CSS 动态显示它们来解决这个问题。但是，这会产生一个非常大的组件文件，因此请尽量避免这种情况。

请注意，我感觉这是预期的行为，因为控制器在卸载时注销了 ref。

Answer 1

我找到了解决办法。不是动态渲染组件而是将显示值传递给组件并将其设置为 hidden HTML 属性。

所以不要这样做：

//ParentComponent
return (
   {displayInput && <CustomInput />}
)

我已经这样做了，它保留了值。

//ParentComponent
return <CustomInput hidden={!displayInput} />

//CustomInput
return (
  <section hidden={hidden}>
    //content
  </section>
)

我担心随着表单的增长，这将不是一种可扩展的方法。理想情况下，我会有条件地渲染这些组件，而不是有条件地使它们 hidden。

Dynamically rendered nested inputs lose their value