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

score 68 · Accepted Answer · edited Jan 26 '21 at 22:54

68

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 '21 at 22:54

GG.

21,083
14
84
130

answered Jul 21 '17 at 07:00

Shubham Khatri

270,417
55
406
400

2

is there an API to set multiple fields at the same time? not during initialValues – Michael Buen Feb 21 '18 at 01:37
2

how does this work for the `component='select'` variant of `` component ? – Dane Apr 03 '18 at 11:53
1

@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 – Shubham Khatri Apr 03 '18 at 11:58
Can you explain a little what happens here? why bind dispatch to change? and how change is a props method? – shinzou Apr 24 '18 at 07:17
@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 https://stackoverflow.com/questions/49994197/whats-the-difference-between-mapstatetoprops-and-mapdispatchtoprops/49994253#49994253 and https://github.com/reactjs/react-redux/blob/master/docs/api.md – Shubham Khatri Apr 24 '18 at 07:23
1

@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 ? – SpiXel May 13 '18 at 09:10
17

`import { change } from "redux-form";` – Alexandre Tranchant Oct 06 '18 at 12:45
NOTE: the `change` from **redux-form** it's the function that does the trick (upating) – kheengz Jul 12 '19 at 10:09
```dispatch(change({someField: someValue})``` – CDM social medias in bio Aug 04 '19 at 02:58
7

If you import `change` from `redux-form`, then the arguments are: `change(form: string, field: string, value: any, touch?: boolean, persistentSubmitErrors?: boolean): FormAction` – rotimi-best Dec 19 '19 at 11:04
@MichaelBuen I solved it by setting the `keepDirtyOnReinitialize: true` setting in order to affect all fields – kunambi Jul 03 '20 at 16:57

Programmatically change Redux-Form Field value

1 Answers1

Linked