我有一个组件,需要一个balance
道具,并且该平衡道具可以随时间变化。
然后我有一个React Final Form来发送交易,通常的字段要发送给接收者,然后在validate
中,我只是检查用户是否有足够的余额来发送交易。
但是,如果用户输入内容时我的余额发生变化,则整个表格都会重置。您将如何只重置部分表单状态?
请参见此代码和框的示例:https://codesandbox.io/s/jn69xql7y3:
我刚遇到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。