Submit a form to ReactJS using the BUTTON element

Question

A few words about my situation: I build the form using ReactJS, and if it has an element <input type="submit">, it works fine: the forms are submitted by pressing enter in input [type = "text"] and pressing the submit element (And there are also working ReactJS checks, when the form is not submitted, if nothing has changed).

But if I replaced input [type = "submit"] with <button>ButtonLabel</button>, I will try to use 2 ways:

• Get the DOMNode form element and call the .submit () method, which is not suitable, since it does not use the internal ReactJS logic

• Pass parameters to the button <button type="submit" form="form-id"> but it still doesn't use ReactJS checks (I don't want to submit the form if nothing has changed)

So, I would really appreciate if anyone would suggest me to submit the form correctly in ReactJS using the BUTTON element.

Thank!

Answer 1

The button element should work exactly as you would expect if the type is set to the submit button and the form has a handler onsubmit.

<form ref="form" onSubmit={this.handleSubmit}>
    <button type="submit">Do the thing</button>
</form>