React-Final-Form:从props设置初始值,在props更改时重置表单状态

问题描述 投票:1回答:1

我有一个组件,需要一个balance道具,并且该平衡道具可以随时间变化。

然后我有一个React Final Form来发送交易,通常的字段要发送给接收者,然后在validate中,我只是检查用户是否有足够的余额来发送交易。

但是,如果用户输入内容时我的余额发生变化,则整个表格都会重置。您将如何只重置部分表单状态?

请参见此代码和框的示例:https://codesandbox.io/s/jn69xql7y3

  • 输入内容
  • 等待5秒
  • 看到表单状态再次为空
react-final-form final-form
1个回答
0
投票

我刚遇到react-final-form的问题,当包装组件中发生任何状态更改时,表单将完全重置。

问题出在这里(来自您的密码箱)

<Form
  initialValues={{ amount: 0, balance }} <-- creates a new object on every render

问题是,当initialValues更改时,整个表格将重新初始化。默认情况下,使用shallow equals将传递给initialValues的内容与前一个进行比较,即比较参考。

这意味着,即使您在渲染中创建一个新对象,即使它相同,当某些状态更改时,整个表单也会重置,渲染功能会重新运行,并为[C0创建一个具有新引用的新对象]。

为了解决一般问题,如果您只想关闭表单重置,我所做的就是将我的initialValues(永远不变)移到一个变量中,以便在每个渲染器上使用相同的引用,因此,默认行为似乎总是与最终形式相同。我希望配置实际上完全关闭这种重新初始化行为,但在文档中找不到。

但是,如果您实际上想要此操作,但需要对其进行修改,则可以使用initialState道具(initialValuesEqual)配置比较行为,例如,对docs here对象进行深度比较。

您还可以使用initialValues属性仅重置表单中未被触摸的部分。

我想上面的某种组合可能会解决您的用例,这取决于您需要的确切UX。

© www.soinside.com 2019 - 2024. All rights reserved.