初始化动态创建的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