Redux 表单默认值

Question

如何设置 defaultValue 输入组件？

 <Field name={`${prize}.rank`} defaultValue={index} component={Input} type='text'/>

我像上面那样尝试过，但我的字段是空的。我正在尝试创建 fieldArray （动态形式）：

 {fields.map((prize, index) =>
    <div key={index} className="fieldArray-container relative border-bottom" style={{paddingTop: 35}}>
        <small className="fieldArray-title marginBottom20">Prize {index + 1}
            <button
                type="button"
                title="Remove prize"
                className="btn btn-link absolute-link right"
                onClick={() => fields.remove(index)}>Delete</button>
        </small>
        <div className="row">
            <div className="col-xs-12 col-sm-6">
                <Field name={`${prize}.rank`}  defaultValue={index} component={Input} type='text'/>
                <Field name={`${prize}.prizeId`} defaultValue={index} component={Input} type='text'/>
                <Field
                    name={`${prize}.name`}
                    type="text"
                    component={Input}
                    label='Prize Name'/>
            </div>
            <div className="col-xs-12 col-sm-6">
                <Field
                    name={`${prize}.url`}
                    type="text"
                    component={Input}
                    label="Prize URL"/>
            </div>
            <div className="col-xs-12">
                <Field
                    name={`${prize}.description`}
                    type="text"
                    component={Input}
                    label="Prize Description" />
            </div>
        </div>
    </div>
)}

原文由 Андрей Гузюк 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 redux 表单上，您可以调用 initialize() 带有如下值的对象：

 class MyForm extends Component {
  componentWillMount () {
    this.props.initialize({ name: 'your name' });
  }

  //if your data can be updated
  componentWillReceiveProps (nextProps) {
    if (/* nextProps changed in a way to reset default values */) {
      this.props.destroy();
      this.props.initialize({…});
    }
  }

  render () {
    return (
      <form>
       <Field name="name" component="…" />
      </form>
    );
  }
}

export default reduxForm({})(MyForm);

通过这种方式，您可以一遍又一遍地更新默认值，但如果您只需要在第一次这样做，您可以：

 export default reduxForm({values: {…}})(MyForm);

原文由 philipp 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这个 jsfiddle 有一个例子

https://jsfiddle.net/bmv437/75rh036o/

 const renderMembers = ({ fields }) => (
  <div>
    <h2>
      Members
    </h2>
    <button onClick={() => fields.push({})}>
      add
    </button>
    <br />
    {fields.map((field, idx) => (
      <div className="member" key={idx}>
        First Name
        <Field name={`${field}.firstName`} component="input" type="text" />
        <br />
        Last Name
        <Field name={`${field}.lastName`} component="input" type="text" />
        <br />
        <button onClick={() => fields.remove(idx)}>
          remove
        </button>
        <br />
      </div>
    ))}
  </div>
);

const Form = () => (
  <FieldArray name="members" component={renderMembers} />
);

const MyForm = reduxForm({
  form: "foo",
  initialValues: {
    members: [{
      firstName: "myFirstName"
    }]
  }
})(Form);

原文由 radix 发布，翻译遵循 CC BY-SA 4.0 许可协议