Redux Form: How to handle multiple buttons?

20
votes

I am trying to add a second submit button to a redux-form.

Both buttons should dispatch an action that saves the data but depending on the button pressed the user should be routed to different pages.

So I defined a handler that I pass as onSubmit prop to the form.

But as far as I can see only the form data is passed to this handler:

The docs on handleSubmit note:

A function meant to be passed to <form onSubmit={handleSubmit}> or to <button onClick={handleSubmit}>. It will run validation, both sync and async, and, if the form is valid, it will call this.props.onSubmit(data) with the contents of the form data.

What I am missing is a way to also pass the information about the button pressed (e.g. the click event) to my onSubmit handler, so that i can save and route as intended.

2
reactjsreduxredux-form
I have a similar issue but instead of redirecting to different pages, I need to trigger the validations dynamically based on the button clicked. What i want is that on click of any button, a flag is set (ex. isSaveMode = true) and on the basis of this flag, I need to trigger validations on specific fields like so: <Field {...props} validate={isSaveMode && [validateRequiredText]}/> – saran3h

2 Answers

44
votes

There are many ways to do this, but they all involve appending the button data depending on which button was pressed. Here's an inline version.

class Morpheus extends Component {
  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        Fields go here
        <button onClick={handleSubmit(values => 
          this.props.onSubmit({ 
            ...values,
            pill: 'blue'
          }))}>Blue Pill</button>
        <button onClick={handleSubmit(values => 
          this.props.onSubmit({ 
            ...values,
            pill: 'red'
          }))}>Red Pill</button>
      </div>
    );
  }
}

export default reduxForm({
  form: 'morpheus'
})(Morpheus)

The handleSubmit handles all the validation checking and whatnot, and if everything is valid, it will call the function given to it with the form values. So we give it a function that appends extra information and calls onSubmit().

2
votes

@mibbit onSubmit is a function that you define (at least this is what the doc says: look the onSubmit method). This is for redux-form 7.x following example of @Erik R.

    class Morpheus extends Component {
    constructor(props) {
        super(props);

        this.state = {};
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(values, pill) {
        // do magic here
    }

    render() {
        const {
            handleSubmit
        } = this.props;
        return ( <
            div >
            Fields go here <
            button onClick = {
                handleSubmit(values =>
                    this.onSubmit({
                        values,
                        pill: 'blue'
                    }))
            } > Blue Pill < /button> <
            button onClick = {
                handleSubmit(values =>
                    this.onSubmit({
                        values,
                        pill: 'red'
                    }))
            } > Red Pill < /button> <
            /div>
        );
    }
}

export default reduxForm({
    form: 'morpheus'
})(Morpheus)