Programmatically change Redux-Form Field value

Question

When I use redux-form v7, I find there is no way to set the field value. Now in my form, I have two select component. The second's value will be clear when the first select component value changed.

In class render:

<div className={classNames(style.line, style.largeLine)}>
  <div className={style.lable}>site:</div>
  <div className={style.content}>
    <Field
      name="site"
      options={sites}
      clearable={false}
      component={this.renderSelectField}
      validate={[required]}
    />
  </div>
</div>

<div className={classNames(style.line, style.largeLine)}>
  <div className={style.lable}>net:</div>
  <div className={style.content}>
    <Field
      name="net"
      options={nets}
      clearable={false}
      component={this.renderSelectField}
      validate={[required]}
      warning={warnings.net}
    />
  </div>
</div>

Now I add the select change hook, and how can I change the other select value

renderSelectField = props => {
  const {
    input,
    type,
    meta: { touched, error },
    ...others
  } = props
  const { onChange } = input
  const _onChange = value => {
    onChange(value)
    this.handleSelectChange({ value, type: input.name })
  }
  return (
    <CHSelect 
      error={touched && error}
      {...input}
      {...others}
      onChange={_onChange}
      onBlur={null}
    />
  )
}

Solution

You can have the onChange logic in this.handleSelectChange({ value, type: input.name }) and use change action from redux-form

According to the docs:

change(field:String, value:any) : Function

Changes the value of a field in the Redux store. This is a bound action creator, so it returns nothing.

Code:

import { change } from "redux-form";

handleSelectChange = (value, type) => {
  if (type === "site") {
    this.props.change('net', "newValue");
  }
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({change}, dispatch);
}

Comments

[Alexandre Leites]

is there an API to set multiple fields at the same time? not during initialValues

[Dane]

how does this work for the component='select' variant of <Field> component ?

[Shubham Khatri]

@Dane similar to how it would work for the input field, it need the field name as the first parameter and the option's value that you need to select

[shinzou]

Can you explain a little what happens here? why bind dispatch to change? and how change is a props method?

[Shubham Khatri]

@shinzou, mapDispatchToProps is something that you use with connect, any action creator that needs to be called from the component need to be bind with dispatch. You can read more about it stackoverflow.com/questions/49994197/… and github.com/reactjs/react-redux/blob/master/docs/api.md

[SpiXel]

@ShubhamKhatri where is the change function imported from? Do we really need to bind it to component props or reduxForm automatically does that? in your code : bindActionCreators({change}, dispatch); , {change} is obviously undefined and should be imported from somewhere right ?

[Alexandre Tranchant]

import { change } from "redux-form";

[kheengz]

NOTE: the change from redux-form it's the function that does the trick (upating)

[Maddocks]

dispatch(change({someField: someValue})

[rotimi-best]

If you import change from redux-form, then the arguments are: change(form: string, field: string, value: any, touch?: boolean, persistentSubmitErrors?: boolean): FormAction

[kunambi]

@MichaelBuen I solved it by setting the keepDirtyOnReinitialize: true setting in order to affect all fields