title: Why isn't onSubmit working for my React-Bootstrap form?
body: <p>I have a form where I want people to put their email and a message. I set the onSubmit parameter for the form element to be my own function, however, it looks like the form is still using the default onSubmit function since the page always refreshes whenever I click the submit button, and does not print out what I say to print in my onSubmit function.</p>
  <p>Looking a bit closer at the event functions for the form, I can see that there is an <code>onSubmit</code> function which is what I want to do and a <code>submit</code> function which is refreshing the page. For some reason it never runs my function (I never see what I'm logging to the console)!</p>
  <p>Here is my code:</p>
  <p>Form stuff:</p>
  <pre><code>&lt;Card style={{marginLeft:&quot;20%&quot;, marginRight:&quot;20%&quot;}}&gt;
      &lt;Card.Body&gt;
      &lt;Card.Title&gt;Leave a Comment&lt;/Card.Title&gt;
          &lt;Form onSubmit={this.email} id=&quot;comments&quot;&gt;
              &lt;Form.Group&gt;
                  &lt;Form.Label&gt;Email address&lt;/Form.Label&gt;
                  &lt;Form.Control type=&quot;email&quot; placeholder=&quot;name@example.com&quot; /&gt;
              &lt;/Form.Group&gt;
              &lt;Form.Group&gt;
                  &lt;Form.Label&gt;Message&lt;/Form.Label&gt;
                  &lt;Form.Control as=&quot;textarea&quot; rows=&quot;3&quot;/&gt;
              &lt;/Form.Group&gt;
              &lt;Button variant=&quot;primary&quot; type=&quot;submit&quot;&gt;
                  Submit
              &lt;/Button&gt;
          &lt;/Form&gt;
      &lt;/Card.Body&gt;
  &lt;/Card&gt;
  </code></pre>
  <p>Email Function:</p>
  <pre><code>email = () =&gt; {
          console.log(&quot;hello there I am working&quot;);
  }
  </code></pre>
  <p>I saw one workaround which said to surround the form in a div like this:</p>
  <pre><code>&lt;div
       onKeyDown={e =&gt; e.stopPropagation()}
       onClick={e =&gt; e.stopPropagation()}
       onFocus={e =&gt; e.stopPropagation()}
       onMouseOver={e =&gt; e.stopPropagation()}
       onSubmit={e =&gt; e.stopPropagation()}
       ... can add other events if they are giving you issues
  &gt;
  </code></pre>
  <p>but that didn't work either. Any ideas on what is going wrong?</p>