Search code examples
react-reduxreact-bootstrapredux-form

Update a value on redux form


I have a react-bootstrap class of a form. The code is something like that:

class MyReactClass extends Component {

// ....

render() {

    return (
        <div>

<Field name="combobox1" component={ComboBox} options={options} ></Field>
<Field name="textField2" component={My_TextField}></Field>
<Field name="textField3" component={My_TextField}></Field>
<Field name="textField4" component={My_TextField}></Field>
       </div>
   }
}


export default reduxForm({
    form: 'myReactClass ',
  }
)(MyReactClass );

I added an initialization to initialize some values:

componentDidMount() {
    this.props.initialize({textField2:'blabla'});
  }

Now I want that when the user selects a value from the combobox, it'll automatically change the value of textfield3. I have a WORKING onChange function for the combobox, but I can't find a way to change textfield3's value. I tried to use "initialize" again - this.props.initialize({textField3: this.getUpdatedValue()}); but it initialize the whole form and the form gets cleared and have only the value for textfield3.

I tried to access this.props.textField3 but I got undefined.

How can I update the form's value?


Solution

  • this.props.change('textField3', this.getUpdatedValue()) would work.

    Optionally, if you need the user to understand that the value was autofilled but can be manually changed, you can use:

    this.props.autofill('textField3', this.getUpdatedValue())

    These are described in the docs here.