Button input type submit not submitting in React with React Router

Question

I added the React.js context cause of the NavLink reference (from React Router) in the button I am trying to use. Either way, when I want to submit data with:

submitData(event) {
    event.preventDefault();
    alert("Submitted");
}

This will work:

<FormGroup>
  <input type="submit" />
</FormGroup>

But this will not:

<FormGroup>
    <Button type="submit" id="submitButton" color="primary"><NavLink to="/Confirm">Submit</NavLink></Button>
</FormGroup>

Not sure why the second won't work, but it is my preferred method. Any ideas or thoughts as to why? I know <button> is newer, but adding type="input" should force it ton work all the same.

Answer 1

The NavLink component is already listening to it's own submit/click event, which isn't propagating to your own form's onSubmit.

The easy solution would simply to bind the NavLink's onClick to your own handler:

<FormGroup>
    <Button type="submit" id="submitButton" color="primary">
        <NavLink to="/Confirm" onClick={this.submitData.bind(this)}>Submit</NavLink>
    </Button>
</FormGroup>