Redux form defaultValue
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);
This jsfiddle has an example
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);
this is my implementation using a HoC
import { Component } from 'react'import { change,} from 'redux-form'class ReduxFormInputContainer extends Component{ componentDidMount(){ const { initialValue, meta, } = this.props if(initialValue === undefined || meta.initial !== undefined || meta.dirty) return const { meta: { form, dispatch }, input: { name }, } = this.props dispatch(change(form, name, initialValue)) } render(){ const { initialValue, component: Compo, ...fieldProps } = this.props return <Compo {...fieldProps} /> }}function reduxFormInputContainer(component){ return function(props){ return <ReduxFormInputContainer {...props} component={component} /> }}export default reduxFormInputContainer
and then for exemple:
import reduxFormInputContainer from 'app/lib/reduxFormInputContainer'InputNumericWidget = reduxFormInputContainer(InputNumericWidget)class InputNumeric extends Component{ render(){ const props = this.props return ( <Field component={InputNumericWidget} {...props} /> ) }}