时间戳

首页 > 解决方案 > 动态渲染的嵌套输入失去了它们的价值

javascript - 动态渲染的嵌套输入失去了它们的价值

问题描述

我是新手，react-hook-form并注意到一些我似乎无法阻止的事情。当一个组件被动态渲染时，它的嵌套输入组件的值不会保持它们的值。

我的组件结构是：

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

这是一个重现问题的沙箱 - https://codesandbox.io/s/flamboyant-http-i574n。

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

注意我感觉这是预期的行为，因为控制器在卸载时取消注册 ref。

标签： javascriptreactjsreact-hook-form

解决方案

我找到了解决方案。而不是动态呈现组件，而是将显示值传递给组件并将其设置为hiddenHTML 属性。

所以不要这样做：

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

我已经这样做了，它保持了价值观。

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

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

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

推荐阅读