How to make controlled input using redux-form?

Question

I have one form component, in which we have one input field.once user enter a digit to input field and press submit, it should become two time of that input value.

import {Field} 'redux-form'; 
class Multiply extends React.Component {

  onInputChange = (stateKey) => (e) => {
    this.setState({ [stateKey]: e.currentTarget.value.trim() });
  };

  onSubmit = () => {
    this.setState({ volume: this.state.volume *2  });
  };

  render(): JSX.Element {
    return (
      <div>
        <div>
          <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
            <Field
              name="volume"
              placeholder="Volume"
              component={renderInput}
              type="number"
              value={this.state.volume}
              onChange={this.onInputChange('volume')}
              validate={required}
            />

            <div>
              <button type="submit">
                Multiply by 2
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

once i click on button, value doesn't get change. but instead of <field> if i use <input> then it works fine. why ?

gustavohenke · Accepted Answer · 2018-03-05 00:21:09Z

2

Redux Form inputs are dictated by their Redux state. This means you have to use its API to deal with them, as Field is giving your renderInput function an input value that equals whatever is in the Redux store for that field name.

What you'll need to do is

Inject the field value. A good way of doing so is by using formValues()
Inject a function that dispatches a change action for that form and for that field
Call such function in your button.

This is the gist of it:

const MyForm = ({ double }) => {
    /* Your form implementation, then */
    <button type="submit" onClick={double}>Double and submit</button>
};

const mapDispatchToProps = (dispatch, props) => ({
    double: () => dispatch(change("foo", "number", props.number * 2))
});

const WithDoublingFunction = formValues("number")(connect(null, mapDispatchToProps)(MyForm));

export default reduxForm({
    form: "foo",
    // the rest of your config
})(WithDoublingFunction);

Here's a working sandbox of such functionality

answered Mar 5, 2018 at 0:21

gustavohenke

41.5k14 gold badges125 silver badges133 bronze badges

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

3 Comments

Mukund Kumar Over a year ago

I have one container component that wraps this component. That wrapper component connected to redux. In your Answer you use same component. how to achieve this ?

gustavohenke Over a year ago

I don't understand you @MukundKumar

Greg K Over a year ago

@mukund You pass action methods to update state in the container component as props to your child component (the form / UI I presume). Call action methods in the child and it'll update the state in the parent container component (that is connected to redux). If you've already got a smart / dumb component model in place, I'm surprised you ask this question as it's a really common pattern.

Collectives™ on Stack Overflow

How to make controlled input using redux-form?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related