I have a form.

I try to submit this form from a different function.

To do so I created a ref. This ref, when printed, has the correct HTML Node and this node also has an submit method. When this submit method is called (formNode.submit()) the form get's submitted, but the onSubmit handler is never triggered.

Why?

Here is a simplified example which shows the same behavior.

class Form extends React.Component {

  constructor() {

    super();



    this.form = React.createRef();

  }



  render() {

    return (

      <div onClick={() => this.form.submit()}>

        Click me!

        <form

          onSubmit={e => console.log(e)}

          ref={f => (this.form = f)}

        />

      </div>

    );

  }

}

https://codesandbox.io/s/vm8pkmony