[英]redux-form Wizard form with linked fields
I am building a multi-step application form with React. 我正在用React构建一个多步骤的应用程序表单。 Having first built it with pure internal state I am now in the process of refactoring to Redux using redux-form.
首先使用纯内部状态构建它,现在我正在使用redux-form重构为Redux。
Having used the example here as a basis: http://redux-form.com/5.2.5/#/examples/wizard?_k=oftw7a we have come a good way. 以此处的示例为基础: http : //redux-form.com/5.2.5/#/examples/wizard?_k=oftw7a,我们已经找到了一个很好的方法。
However the problem appears when i have two forms which are supposed to have the same value. 但是,当我有两个具有相同值的表格时,就会出现问题。 During one of the pages i have a name field, that is supposed to be duplicated on the name field of the next page.
在其中一个页面中,我有一个名称字段,应该在下一页的名称字段上重复该名称字段。 The opposite should happen if you go back from the last page.
如果您从上一页返回,则应相反。 Any tips to how this could be achieved?
如何实现此目标的任何提示?
Using the wizard, you are basically working with the exact same form that's split into multiple pieces. 使用向导,您基本上可以使用完全相同的形式,将其分为多个部分。 Ultimately it's the same form, because redux-form tracks them by name.
最终,它是相同的形式,因为redux形式会按名称跟踪它们。 It is how the library identifies the pieces of the same form - using the name.
库就是使用名称来识别相同形式的片段的方式。
form: 'wizard',
Here you can see that the exact same instance of the form will be shared throughout the pieces. 在这里,您可以看到表单的完全相同的实例将在整个块中共享。
fields
work in a similar manner. fields
以类似的方式工作。 Each field
is defined as part of a form
. 每个
field
都定义为form
一部分。
As long as you use the same field
constants inside the fields
object that you pass into the reduxForm
function and as long as the value
for form is the same, so that they use the same underlying form object, it should work for you just fine. 只要您在传递给
reduxForm
函数的fields
对象内使用相同的field
常量,并且只要form的value
相同,以便它们使用相同的基础form对象,它就可以正常工作。
On one page you should pass in 在一页上您应该传递
export default reduxForm({
form: 'wizard',
fields : {
'fieldIWantOnBothPartsOfTheForm',
'someOtherFieldThatShouldOnlyBeHere',
},
...
And then on the other page: 然后在另一页上:
export default reduxForm({
form: 'wizard',
fields : {
'fieldIWantOnBothPartsOfTheForm',
'thirdFieldHere',
},
...
Also, make sure you keep destroyOnUnmount
equal to false
if you want to navigate back-and-forth. 此外,如果要来回导航,请确保将
destroyOnUnmount
保持等于false
。
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.