初始化動態創建的redux表單字段

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但終極版，窗體元素是不是有正確的值。當輸入字段被渲染時，值爲empty。任何想法我可以做什麼來初始化一個Redux形式的字段，當它動態創建？ （我不能使用文檔中提到的handleInitialize函數方法，因爲表單字段是在運行時動態生成的）

Answer 1

Field組件不包含value道具。您可以使用設置的默認值幾個選項：

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

從終極版形式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; 

Answer 2

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

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

Answer 3

因爲你把S IN串符號這樣's.Name'

你可以把它像這樣{} s.Name