<p dir="auto">For Example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;input type=&quot;number&quot; onChange={this._onChange} /&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"number"</span> <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_onChange</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">In Chrome, you cannot  type a non-number character, in Safari And Firefox, You can type non-number character ,but in this moment value of Change is empty string ""。How can solve this problem?</p>
<p dir="auto">A controlled number input, without a corresponding <code class="notranslate">setState</code> function, still allows <code class="notranslate">e</code>, <code class="notranslate">-</code> and <code class="notranslate">.</code> to be entered (and numbers can be inputted afterwards). I could be incorrect but I don't believe this is the desired behavior.</p>
<p dir="auto"><a href="https://jsfiddle.net/vervujhm/" rel="nofollow">Here's a JSFiddle</a> demonstrating the issue.</p>