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}
    />
  )
}

GG. · Accepted Answer · 2021-01-26 22:54:07Z

69

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);
}

edited Jan 26, 2021 at 22:54

GG.

22k14 gold badges93 silver badges133 bronze badges

answered Jul 21, 2017 at 7:00

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Michael Buen Over a year ago

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

Dane Over a year ago

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

Shubham Khatri Over a year ago

@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

Alexandre Tranchant Over a year ago

import { change } from "redux-form";

rotimi-best Over a year ago

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

|

Collectives™ on Stack Overflow

Programmatically change Redux-Form Field value

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related