title: React input defaultValue doesn't update with state
body: <p>I'm trying to create a simple form with react, but facing difficulty having the data properly bind to the defaultValue of the form.</p>
  
  <p>The behavior I'm looking for is this:</p>
  
  <ol>
  <li>When I open my page, the Text input field should be filled in with the text of my AwayMessage in my database. That is "Sample Text"</li>
  <li>Ideally I want to have a placeholder in the Text input field if the AwayMessage in my database has no text.</li>
  </ol>
  
  <p>However, right now, I'm finding that the Text input field is blank every time I refresh the page. (Though what I type into the input does save properly and persist.) I think this is because the input text field's html loads when the AwayMessage is an empty object, but doesn't refresh when the awayMessage loads. Also, I'm unable to specify a default value for the field.</p>
  
  <p>I removed some of the code for clarity (i.e. onToggleChange)</p>
  
  <pre><code>    window.Pages ||= {}
  
      Pages.AwayMessages = React.createClass
  
        getInitialState: -&gt;
          App.API.fetchAwayMessage (data) =&gt;
          @setState awayMessage:data.away_message
          {awayMessage: {}}
  
        onTextChange: (event) -&gt;
          console.log "VALUE", event.target.value
  
        onSubmit: (e) -&gt;
          window.a = @
          e.preventDefault()
          awayMessage = {}
          awayMessage["master_toggle"]=@refs["master_toggle"].getDOMNode().checked
          console.log "value of text", @refs["text"].getDOMNode().value
          awayMessage["text"]=@refs["text"].getDOMNode().value
          @awayMessage(awayMessage)
  
        awayMessage: (awayMessage)-&gt;
          console.log "I'm saving", awayMessage
          App.API.saveAwayMessage awayMessage, (data) =&gt;
            if data.status == 'ok'
              App.modal.closeModal()
              notificationActions.notify("Away Message saved.")
              @setState awayMessage:awayMessage
  
        render: -&gt;
          console.log "AWAY_MESSAGE", this.state.awayMessage
          awayMessageText = if this.state.awayMessage then this.state.awayMessage.text else "Placeholder Text"
          `&lt;div className="away-messages"&gt;
             &lt;div className="header"&gt;
               &lt;h4&gt;Away Messages&lt;/h4&gt;
             &lt;/div&gt;
             &lt;div className="content"&gt;
               &lt;div className="input-group"&gt;
                 &lt;label for="master_toggle"&gt;On?&lt;/label&gt;
                 &lt;input ref="master_toggle" type="checkbox" onChange={this.onToggleChange} defaultChecked={this.state.awayMessage.master_toggle} /&gt;
               &lt;/div&gt;
               &lt;div className="input-group"&gt;
                 &lt;label for="text"&gt;Text&lt;/label&gt;
                 &lt;input ref="text" onChange={this.onTextChange} defaultValue={awayMessageText} /&gt;
               &lt;/div&gt;
             &lt;/div&gt;
             &lt;div className="footer"&gt;
               &lt;button className="button2" onClick={this.close}&gt;Close&lt;/button&gt;
               &lt;button className="button1" onClick={this.onSubmit}&gt;Save&lt;/button&gt;
             &lt;/div&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>my console.log for AwayMessage shows the following:</p>
  
  <pre><code>AWAY_MESSAGE Object {}
  AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}
  </code></pre>