title: React Component and Invalid Input
body: <p>I have the following react component:</p>
  
  <pre><code>var App = React.createClass({
      getInitialState: function() {
          return {value: 4.5}
      },
      change: function(event) {
          this.setState({value: parseFloat(event.target.value)});
      },
      render: function() {
          return &lt;input type="number" value={this.state.value} onChange={this.change}/&gt;;
      }
  });
  
  React.render(&lt;App/&gt;, document.body);
  </code></pre>
  
  <p>You can see it here: <a href="http://jsfiddle.net/2hauj2qg/" rel="nofollow">http://jsfiddle.net/2hauj2qg/</a></p>
  
  <p>The problem is that if I want to type in a number like: "4.7". When the user enters, "4.", it becomes "4", due to being converted to a float in back. But this interrupts what the user was typing. What's the recommended way of solving this problem?</p>