You can achieve this by using regular HTML capabilities (HTML form Attribute), no need to use the React hacks:
Add “id” attribute to your form: id=’my-form’
class CustomForm extends Component {
render() {
return (
<form id='my-form' onSubmit={alert('Form submitted!')}>
// Form Inputs go here
</form>
);
}
}
Then add the same Id to the “form” attribute of the target button outside of the form:
<button form='my-form' type="submit">Outside Button</button>
Now, the ‘Outside Button’ button will be absolutely equivalent as if it is inside the form.
Note: This is not supported by IE11.