2

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

我的组件结构是:

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

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

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

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

4

1 回答 1

0

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

所以不要这样做:

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

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

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

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

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

于 2020-04-19T19:12:49.100 回答