How to create several submit buttons in a react.js form?

Question

I am trying to create a form in react.js where the user can click on two different button to execute two different actions. In my case, the form should allow the user to select a document and either replace the current document (1st button) or to be appended to it (2nd button). Is it possible to achieve this in a single form ?

I thought i could detect which button was applied using the 'event' parameter in the onSubmit function, but didn't success at it. I also thought about recreating a pseudo-form using references to inputs and normal buttons, but I would prefer not to use such a hack if a cleaner solution exists.

Thank you in advance for your help!

Note: I have found some questions related to multiple submit buttons (here and here for example), but none of them deal with react.js solutions.

Answer 1

Try this. It will process a regular submit (via the button or pressing enter) using "handleSubmit" function, and the alternative submit (via the other button) using "handleAlternate".

Functional component:

const Example = () => {

  const handleSubmit = (event) => {
    event.preventDefault();
    ....
  }
  
  const handleAlternate = (event) => {
    event.preventDefault();
    ...
  }

  return (
    <form onSubmit={handleSubmit}>
      ...
      <button type="submit">Submit</button>
      <button onClick={handleAlternate}>Alternate</button>
    </form>
  )

}

Class component:

class Example extends React.Component {

  handleSubmit(event) {
    event.preventDefault();
    ....
  }

  handleAlternate(event) {
    event.preventDefault();
    ...
  }

  render() {
    <form onSubmit={this.handleSubmit.bind(this)}>
      ...
      <button type="submit">Submit</button>
      <button onClick={this.handleAlternate.bind(this)}>Alternate</button>
    </form>
  }

}

And as Alexis pointed out, it might be more correct (but less readable IMO) to actually declare the second button's type, as the default would be for a form button to submit:

<form onSubmit={handleSubmit}>
  ....
  <button>Submit</button>
  <button type="button" onClick={handleAlternate}>Alternate</button>
</form>