title: Prepopulate input text with semantic UI react
body: <p>How can you set a predefined value on a Form.Input or Input component in semantic UI react? I've tried passing defaultValue="someVal" as a prop which works. But that doesn't update the value if props change. I tried passing the prop value="someVal" which prepopulates it but blocks any access to edit that field. All keystrokes are ignored. There must be a way to basically do</p>
  
  <p>  and still have it update the value when componentWillReceiveProps is triggered?</p>
  
  <p>Here is the input component I'm using </p>
  
  <p>This is the form which uses the Input below as the control
  <a href="https://react.semantic-ui.com/collections/form" rel="nofollow noreferrer">https://react.semantic-ui.com/collections/form</a>
  <a href="https://react.semantic-ui.com/elements/input" rel="nofollow noreferrer">https://react.semantic-ui.com/elements/input</a></p>
  
  <p>I have an AutoSaveInput.jsx which essentially renders the input below with an onChange to automatically save each keystroke ( still need to add a debounce ).</p>
  
  <pre><code>&lt;Label  basic&gt;{this.props.label}&lt;/Label&gt;
  &lt;Form.Input
                              defaultValue={this.props.defaultValue}
                              disabled={this.props.disabled}
                              name={this.props.name}
                              onChange={this.onChange}
                              error={this.state.isDirty}
  
                              /&gt;
  </code></pre>
  
  <p>The input above works fine initially.  However, when new props come in, this.props.label updates fine, but the Form.Input value does not update at all.  Instead it still shows the previous value.</p>
  
  <p>Also if I change this to the below, the values do update with new props, but you can't type in the input itself.  The cursor just jumps to the end of the input and doesn't let you type anything else.</p>
  
  <pre><code>&lt;Label  basic&gt;{this.props.label}&lt;/Label&gt;
  &lt;Form.Input
                              value={this.props.defaultValue}
                              disabled={this.props.disabled}
                              name={this.props.name}
                              onChange={this.onChange}
                              error={this.state.isDirty}
  
                              /&gt;
  </code></pre>
  
  <p>Also the props are being updated via ReactRouter v4 by clicking a Click where the var is what loads in different form content for editing.</p>