我正在为我的应用程序使用 redux-form,一切看起来都很棒。但我不喜欢它处理输入的方式,或者我的设计可能很糟糕。
我的应用程序上有这个简单的表单(作为示例)。
form onSubmit={handleSubmit} onChange={handleChange}>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="firstName"
component="input" type="text"
ref='firstName'
withRef
/>
</div>
<div>
<label htmlFor="lastName">Last Name</label>
<Field name="lastName" component="input" type="text" />
</div>
<div>
<label htmlFor="email">Email</label>
<Field name="email" component="input" type="email" />
</div>
<FlatButton
label={intl.formatMessage({ id: 'submit' })}
type='submit'
primary
//disabled={!initialized}
/>
</form>
看起来不错,但是当我将其保存到 firebase 时,它会将其另存为
email:blablabla@blabla
firstName:blablabla
lastName:bla
这不是我想要的。我想要类似 json 的东西:
{userData: {
email:blablabla@blabla,
firstName:blablabla,
lastName:bla
}}
我有自己的理由想要这样做(动态表单)。
有人有关于如何处理这个问题的好主意吗?我喜欢 redux-forms,并且不想用 actions、reducers 之类的东西来制作所有的东西。
谢谢
最佳答案
在 redux 形式中,有一个 FormSection组件,仅针对您的问题。
在你的情况下,它应该看起来像这样:
<form onSubmit={handleSubmit} onChange={handleChange}>
<FormSection name='userData'>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="firstName"
component="input" type="text"
ref='firstName'
withRef
/>
</div>
<div>
<label htmlFor="lastName">Last Name</label>
<Field name="lastName" component="input" type="text" />
</div>
<div>
<label htmlFor="email">Email</label>
<Field name="email" component="input" type="email" />
</div>
<FlatButton
label={intl.formatMessage({ id: 'submit' })}
type='submit'
primary
//disabled={!initialized}
/>
<FormSection>
</form>
关于javascript - 如何使用 Redux-Form 保存复合对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49439263/