初始化動態創建的redux-form字段

Question

我有一個動態創建的redux形式的字段。 例如，當我單擊一個按鈕時，我將執行以下操作：

renderFormFields() {
 const r = someArray.map(s => {
   console.log(s.Value);
   return (<Field name={s.Name} type='number' component='input' min='1' {...s.Value} />);
 })

 {r}
}

render() {
 renderFormFields()
}

現在console.log正在為s.Value打印正確的值，但是redux-form元素沒有正確的值。 呈現輸入字段時，該值為empty 。 知道在動態創建Redux形式的字段時如何初始化它嗎？ （我不能使用文檔中提到的handleInitialize函數方法，因為表單字段是在運行時動態生成的）

Answer 1

您不應該傳播s而不是s.value嗎？

return (<Field name={s.Name} type='number' component='input' min='1' {...s} />);

Answer 2

因為您將s像這樣's.Name'字符串表示法's.Name'

您可以這樣輸入{s.Name}

Answer 3

Field組件不包含value屬性。 您可以使用以下兩個選項來設置默認值：

1. initialValues （如果您知道將動態添加的字段的默認值）
2. 使用this.props.change （如果默認值也是動態的）

Redux-form的SimpleForm示例的修改版本：

import React from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm } from 'redux-form'

const extendedFields = [{ name: 'City', value: 'Hyderabad' }, { name: 'Phone', value: 2 }];

class SimpleForm extends React.Component {

  constructor() {
    super();
    this.state = {
      showExtended: false
    };
  }

  addExtendedFields() {
    // Not the best way to handle state. Doing this for simplicity
    this.setState({ showExtended: { initialized: false } });
  }

  renderExtendedFields() {
    const r = extendedFields.map(field => {
      return (
        <div key={field.name}>
          <label>{field.name}</label>
          <div>
            <Field type='text' component='input' {...field} value={field.value} />
          </div>
        </div>
      );
    });

    return r;
  }

  componentDidUpdate() {
    const { showExtended } = this.state;
    if (showExtended && !showExtended.initialized) {
      extendedFields.map(field => {
        this.props.change(field.name, field.value); // Option-2
        return field;
      });
      this.setState({ showExtended: { initialized: true } });
    }
  }

  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    const { showExtended } = this.state;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <div>
            <Field name="firstName" component="input" type="text" placeholder="First Name" />
          </div>
        </div>
        <div>
          <label>Last Name</label>
          <div>
            <Field name="lastName" component="input" type="text" placeholder="Last Name" />
          </div>
        </div>
        <div>
          <label>Email</label>
          <div>
            <Field name="email" component="input" type="email" placeholder="Email" />
          </div>
        </div>
        <div>
          <label>Sex</label>
          <div>
            <label><Field name="sex" component="input" type="radio" value="male" /> Male</label>
            <label><Field name="sex" component="input" type="radio" value="female" /> Female</label>
          </div>
        </div>
        <div>
          <label>Favorite Color</label>
          <div>
            <Field name="favoriteColor" component="select">
              <option></option>
              <option value="ff0000">Red</option>
              <option value="00ff00">Green</option>
              <option value="0000ff">Blue</option>
            </Field>
          </div>
        </div>
        <div>
          <label htmlFor="employed">Employed</label>
          <div>
            <Field name="employed" id="employed" component="input" type="checkbox" />
          </div>
        </div>
        {showExtended && this.renderExtendedFields()}
        <div>
          <label>Notes</label>
          <div>
            <Field name="notes" component="textarea" />
          </div>
        </div>
        <div>
          <button type="submit" disabled={pristine || submitting}>Submit</button>
          <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
          <button type="button" onClick={this.addExtendedFields.bind(this)} disabled={showExtended}>Show Extended fields</button>
        </div>
      </form>
    );
  }
}

let HOCSimpleForm = reduxForm({
  form: 'simple'
})(SimpleForm);

HOCSimpleForm = connect(
  state => ({
    initialValues: { City: 'Test' } // Option-1
  })
)(HOCSimpleForm)

export default HOCSimpleForm;