रेडक्स फॉर्म डिफ़ॉल्ट वैल्यू

Question

इनपुट घटक के लिए defaultValue कैसे सेट करें?

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

मैं ऊपर की तरह करने की कोशिश की, लेकिन मेरी फ़ील्ड रिक्त

मैं तुम्हें मूल्यों का एक उद्देश्य के साथ initialize() कॉल कर सकते हैं 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> 
      )} 

Answer 1

redux रूपों पर कोशिश कर रहा हूँ कर रहे हैं इस तरह:

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

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)