Redux形式为defaultValue [英] Redux form defaultValue

问题描述

如何设置 defaultValue 来输入组件？

How to set defaultValue to input component?

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

我试过上面但我的字段是空的。我正在尝试创建 fieldArray （动态表单）：

I tried like above but my fields are empty. I'm trying to create fieldArray (dynamic forms):

{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>
)}

推荐答案

在redux表格上你可以使用如下值的对象调用 initialize（）：

On redux forms you can call initialize() with an object of values like so:

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);

这样你可以一遍又一遍地更新默认值，但是如果你只需要这样做在你第一次可以：

This way you can update the default values over and over again, but if you just need to do it at the first time you can:

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

这篇关于Redux形式为defaultValue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！