The value in the field in the form of a redux

I have a reduction form with a dropdown and text fields. When changing the dropdown I have to update other fields. Other fields use a custom component example.   

So the structure is similar. 1. a component having the form 2. A component of the field.

Now I googled and found a few things to update the field, but could not do it. What I tried 1. Adding state to the field as shown below. Does not work.

<Field name="accountno" value="this.state.accountno" component={InputText} placeholder="Number" />
  1. I tried disptach, but could not use it. Receiving an error for no sending I'm prop type

    this.props.dispatch (change ('form', 'accountno', 'test value'));

  2. I tried this.props.fields, but not the same fields in the attribute type.

It should work using 2 or 3, but cannot find where to add them. Please let me know how I can use these or any other methods.

+6
source share
2 answers

When using, redux-formyou do not need to set the value directly in the field. You can use the method initializeto fill out the form. Or initialValuesas a property of the object passed in reduxto display the state in the details. Another way is to set the values ​​individually using the changefrom function redux-form. To make it work, you need to wrap your component connectfrom react-redux. He embeds the method dispatchin your details.

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';

class Form extends Component {
  componentDidMount() {
    this.props.initialize({ accountno: 'some value here' });
    // set the value individually
    this.props.dispatch(change('myFormName', 'anotherField', 'value'));
  }

  render() {
    return (
      <form onSubmit={...}>
        ...
        <Field name="accountno" component={InputText} placeholder="Number" />
        <Field name="anotherField" component={InputText} />
      </form>
    )
  }
}

Form = reduxForm({ 
  form: 'myFormName' 
})(Form);

export default connect(state => ({ 
  // alternatively, you can set initial values here...
  initialValues: {
    accountno: 'some value here'
  } 
}))(Form);
+7

. , initialValues juliobetta , , state.blah.

enableReinitialize true, :

export default connect(state => ({ 
  initialValues: {
    accountno: state.accountno,
  },
  enableReinitialize: true,
}))(Form);

, , state.accountno, .

0

Source: https://habr.com/ru/post/1016938/


All Articles