Redux Form: How to handle multiple buttons?

Question

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.

Answer 1

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().