title: React/Semantic UI add call to action on button
body: <p>Using <code>Semantic-UI</code> / <code>ReactJS</code> want to add <code>onClick</code> function on <code>button</code>, but when I add, it call function on <code>input</code> click too, but I want to add only on <code>button</code></p>
  
  <pre><code>handleClick= (e) =&gt; this.setState({ click: true});
  ...
    &lt;Input
      action={{
        color: 'teal',
        labelPosition: 'left',
        icon: 'cart',
        content: 'Checkout',
      }}
      actionPosition='left'
      placeholder='Search...'
      defaultValue='52.03',
      onClick={this.handleClick}
        /&gt;
  </code></pre>
  
  <p><em>Result:</em></p>
  
  <pre><code>&lt;div class="ui left action input"&gt;
    &lt;button class="ui teal icon left labeled button"&gt;
      &lt;i aria-hidden="true" class="cart icon"&gt;&lt;/i&gt;
      Checkout
    &lt;/button&gt;
    &lt;input type="text" placeholder="Search..." value="52.03" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>See demo result <a href="https://react.semantic-ui.com/elements/input/" rel="nofollow noreferrer">here</a>, in this page, serach <code>You can pass a Button props object.</code> to find example.</p>