javascript - 如何使用 Redux-Form 保存复合对象？

Question

我正在为我的应用程序使用 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 之类的东西来制作所有的东西。

谢谢

Answer 1

在 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>