Formularz Redux defaultValue

Question

Jak ustawić defaultValue na komponent wejściowy?

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

Starałem się jak wyżej, ale moje pola są puste

Próbuję utworzyć fieldArray (dynamiczne formularze)

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

Answer 1

na formularzach Redux można nazwać initialize() z obiektem wartości tak:

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

W ten sposób można zaktualizować wartości domyślne powyżej i kółko, ale jeśli tylko trzeba to zrobić za pierwszym razem można:

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

Answer 2

Ten jsfiddle ma przykład

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)