如何使用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形式，並且不想用動作，reduce和這類東西來使方式變通。

謝謝

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>