title: Number with decimal input in React?
body: <p>I have a number input within a React component, and it needs to accept numbers with a decimal point. Usually, entries will be in the fractions of a cent, like <code>0.0073</code>, that kind of thing.</p>
  <pre><code>&lt;div className=&quot;form-group&quot;&gt;
    &lt;label htmlFor=&quot;rate&quot; className=&quot;col-sm-6 control-label&quot;&gt;Rate:&lt;/label&gt;
    &lt;div className=&quot;col-sm-2&quot;&gt; 
      &lt;input type=&quot;number&quot;
        title=&quot;Rate&quot;
        id=&quot;rate&quot;
        className=&quot;form-control&quot;
        value={this.props.rate}
        min=&quot;0.00&quot;
        step=&quot;0.001&quot;
        max=&quot;1.00&quot;
        onChange={()=&gt;{
          console.log('page rate changed');
          this.props.setrate($('#rate').val());
        }} /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The issue is that with every keystroke, it's resetting the rate for the app, and then putting that value into the <code>input</code>. So it goes like this:</p>
  <ul>
  <li>User types <code>0</code>, the value is set to <code>0</code>, and <code>0</code> is displayed.</li>
  <li>User types <code>.</code>, <code>0.</code> isn't a valid number, so the input is cleared.</li>
  </ul>
  <p>Can anyone think of a workaround? I know I could just use a normal input, but <code>type=&quot;number&quot;</code> leads to some nice stuff in various browsers.</p>