title: Submit Form using Button in Parent Component in React
body: <p><a href="https://i.stack.imgur.com/5iqx3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5iqx3.png" alt="form modal"></a></p>
  
  <p>So I have to implement a form in modal, as you can see, the button in the modal are not the buttons in the form. I created the form as a child component of the modal. How can I submit the form using the button in the parent component. I am using <a href="https://react.semantic-ui.com/collections/form#form-example-capture-values" rel="noreferrer">React Semantic-UI</a> react as my UI framework.</p>
  
  <p>I think if I can hide the button in the form and trigger it using JavaScript. I think this might be achieved via getElementById, but is there a react way of doing it?</p>
  
  <p>My current Modal looks like this:</p>
  
  <pre><code>&lt;Modal open={this.props.open} onClose={this.props.onClose} size="small" dimmer={"blurring"}&gt;
      &lt;Modal.Header&gt; Edit Activity {this.props.name} &lt;/Modal.Header&gt;
      &lt;Modal.Content&gt;
        &lt;ActivityInfoForm/&gt;
      &lt;/Modal.Content&gt;
      &lt;Modal.Actions&gt;
          &lt;Button negative onClick={this.props.onClose}&gt;
              Cancel
          &lt;/Button&gt;
          &lt;Button positive
                  content='Submit'
                  onClick={this.makeActivityInfoUpdateHandler(this.props.activityId)} /&gt;
      &lt;/Modal.Actions&gt;
  &lt;/Modal&gt;
  </code></pre>
  
  <p>My form code looks like this:</p>
  
  <pre><code>&lt;Form&gt;
      &lt;Form.Group widths='equal'&gt;
          &lt;Form.Input label='Activity Name' placeholder='eg. CIS 422' /&gt;
          &lt;Form.Input label='Activity End Date' placeholder='Pick a Date' /&gt;
      &lt;/Form.Group&gt;
      &lt;Form.Group widths='equal'&gt;
          &lt;Form.Input label='Total Capacity' placeholder='eg. 30' /&gt;
          &lt;Form.Input label='Team Capacity' placeholder='eg. 3' /&gt;
      &lt;/Form.Group&gt;
  &lt;/Form&gt;
  </code></pre>