blocks|key|1116797|text|我试图模仿您的代码，并注意到存在一个与<input+type='number'+/>交互的问题。要解决这个问题，请检查这个示例并自己尝试：https://codepen.io/zvona/pen/WjpKJX?editors=0010|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1116798|您需要将其定义为普通输入(type='text')，只对数字使用模式：|1116799|++++<input+type="text"+pattern="[0-9]*"
+++++onInput={this.handleChange.bind(this)}+value={this.state.financialGoal}+/>|code-block|syntax|javascript|1116800|然后比较输入的有效性：|1116801|const+financialGoal+=+(evt.target.validity.valid)+?+
++evt.target.value+:+this.state.financialGoal;|1116802|这种方法最大的警告是，当涉及到移动->键盘不是数字，而是以正常的字母格式。|1116803|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/zvona/pen/WjpKJX?editors=0010^0|E|U|J|N|1X|1C|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|D]]|E|@$9|16|A|17|1|18]]|F|$]]|$1|G|3|H|5|6|7|19|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|1A|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|6|7|1B|8|@]|E|@]|F|$]]|$1|P|3|Q|5|K|7|1C|8|@]|E|@]|F|$L|M]]|$1|R|3|S|5|6|7|1D|8|@]|E|@]|F|$]]|$1|T|3|-4|5|6|7|1E|8|@]|E|@]|F|$]]]|U|$V|$5|W|X|Y|F|$Z|10]]]]

<p>I tried to mimic your code and noticed that <strong>there's an issue on React</strong> with <code>&lt;input type='number' /&gt;</code>. For workaround, check this example and try it yourself: <a href="https://codepen.io/zvona/pen/WjpKJX?editors=0010" rel="noreferrer">https://codepen.io/zvona/pen/WjpKJX?editors=0010</a></p>

<p>You need to define it as normal input (type='text') with pattern for numbers only:</p>

<pre><code>    &lt;input type="text" pattern="[0-9]*"
     onInput={this.handleChange.bind(this)} value={this.state.financialGoal} /&gt;
</code></pre>

<p>And then to compare the validity of input:</p>

<pre><code>const financialGoal = (evt.target.validity.valid) ? 
  evt.target.value : this.state.financialGoal;
</code></pre>

<p>The biggest caveat on this approach is when it comes to mobile --> where keyboard isn't in numeric but in normal alphabetic format.</p>


blocks|key|2830064|text|简单的反应方式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2830065|<input
++++++onKeyPress={(event)+=>+{
++++++++if+(!/[0-9]/.test(event.key))+{
++++++++++event.preventDefault();
++++++++}
++++++}}
++++/>|code-block|syntax|javascript|2830066|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simply way in React</p>
<pre><code>&lt;input
      onKeyPress={(event) =&gt; {
        if (!/[0-9]/.test(event.key)) {
          event.preventDefault();
        }
      }}
    /&gt;
</code></pre>


blocks|key|1116836|text|一行代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116837|<input+value={this.state.financialGoal}+onChange={event+=>+this.setState({financialGoal:+event.target.value.replace(/\D/,'')})}/>|code-block|syntax|javascript|1116838|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>one line of code</p>

<pre><code>&lt;input value={this.state.financialGoal} onChange={event =&gt; this.setState({financialGoal: event.target.value.replace(/\D/,'')})}/&gt;
</code></pre>


blocks|key|1174849|text|若要停止键入，请使用onKeyPress而不是onChange。|type|unordered-list-item|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1174850|在event.preventDefault()中使用onKeyPress意味着停止按下事件。|1174851|由于keyPress处理程序是在onChange之前触发的，所以必须检查按下的键(event.keyCode)，而不是输入的当前值(event.target.value)。
onKeyPress(event)+{+const+keyCode+=+event.keyCode维斯维event.which；const+keyValue+=+String.fromCharCode(keyCode)；if+(/%2Bx-/..test(KeyValue))+event.preventDefault()；}|1174852|下面的演示|unstyled|1174853|​|1174854|const+{Component}+=+React;+

class+Input+extends+Component+{
++

++onKeyPress(event)+{
+++const+keyCode+=+event.keyCode+%7C%7C+event.which;
+++const+keyValue+=+String.fromCharCode(keyCode);
++++if+(/\%2B%7C-/.test(keyValue))
++++++event.preventDefault();
++}
++render()+{
++
+++return+(
+++<input+style={{width:+'150px'}}+type="number"+onKeyPress={this.onKeyPress.bind(this)}+/>

+++)
++}
+
}

ReactDOM.render(<Input+/>+,+document.querySelector('#app'));|code-block|syntax|javascript|1174855|<script+src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<section+id="app"></section>|1174856|1174857|entityMap^0|A|A|N|8|0|1|M|Q|A|0|2|8|G|8|15|D|1U|I|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1H|8|@]|D|@]|E|$]]|$1|M|3|N|5|L|7|1I|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1J|8|@]|D|@]|E|$R|S]]|$1|T|3|U|5|Q|7|1K|8|@]|D|@]|E|$R|S]]|$1|V|3|N|5|L|7|1L|8|@]|D|@]|E|$]]|$1|W|3|-4|5|L|7|1M|8|@]|D|@]|E|$]]]|X|$]]

<ul>
<li><p>To stop typing, use <code>onKeyPress</code> not <code>onChange</code> . </p></li>
<li><p>Using <code>event.preventDefault()</code> inside <code>onKeyPress</code> means STOP the pressing event .</p></li>
<li><p>Since <code>keyPress</code> handler is triggered before <code>onChange</code>, you have to check the pressed key (<code>event.keyCode</code>), NOT the current value of input (<code>event.target.value</code>)</p>

<pre><code>onKeyPress(event) {
  const keyCode = event.keyCode || event.which;
  const keyValue = String.fromCharCode(keyCode);
  if (/\+|-/.test(keyValue))
    event.preventDefault();
}
</code></pre></li>
</ul>

<h1>Demo below </h1>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const {Component} = React; 

class Input extends Component {
  

  onKeyPress(event) {
   const keyCode = event.keyCode || event.which;
   const keyValue = String.fromCharCode(keyCode);
    if (/\+|-/.test(keyValue))
      event.preventDefault();
  }
  render() {
  
   return (
   &lt;input style={{width: '150px'}} type="number" onKeyPress={this.onKeyPress.bind(this)} /&gt;

   )
  }
 
}

ReactDOM.render(&lt;Input /&gt; , document.querySelector('#app'));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;

&lt;section id="app"&gt;&lt;/section&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1116861|text|如果希望维护输入type='number'+(可能用于移动设备触发数字键盘)，则应该使用onInput而不是onChange来捕获事件更改。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1116862|使用onInput修复了一个错误，在这个错误中，向数字输入输入文本将绕过我在onChange中分配给它的验证。一旦我将这个函数修复为在onInput中调用，它就会在所有实例中触发。|1116863|下面是我所做工作的一个例子：|1116864|<input
++++type='number'
++++id={`player${index}Score`}
++++className='form-control'
++++pattern='[0-9]{0,5}'
++++onInput={(event)+=>+this.enterScore(event,+index)}
++++value={this.props.scoreLabel(this.state.scores[index])}
/>|code-block|syntax|javascript|1116865|我希望这能帮到你!|1116866|编辑-+08-03-2018：|1116867|我想出了一个更好的解决方案。使用type='tel‘以及输入组件本身内的模式regex。|1116868|我把它连接起来的具体细节如下：|1116869|class+Input+extends+React.Component+{
++state+=+{message:+'3'};

++updateNumber+=+(e)+=>+{
++++const+val+=+e.target.value;
++++//+If+the+current+value+passes+the+validity+test+then+apply+that+to+state
++++if+(e.target.validity.valid)+this.setState({message:+e.target.value});
++++//+If+the+current+val+is+just+the+negation+sign,+or+it's+been+provided+an+empty+string,
++++//+then+apply+that+value+to+state+-+we+still+have+to+validate+this+input+before+processing
++++//+it+to+some+other+component+or+data+structure,+but+it+frees+up+our+input+the+way+a+user
++++//+would+expect+to+interact+with+this+component
++++else+if+(val+===+''+%7C%7C+val+===+'-')+this.setState({message:+val});
++}

++render()+{
++++return+(
++++++<input
++++++++type='tel'
++++++++value={this.state.message}
++++++++onChange={this.updateNumber}
++++++++pattern="%5E-?[0-9]\d*\.?\d*$"
++++++/>
++++);
++}
}

ReactDOM.render(<Input+/>,+document.getElementById('main'));|1116870|我有一个在科德芬上工作的例子|1116871|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/JimmayVV/pen/zLaZBL?editors=0010^0|8|D|18|7|1I|8|0|2|7|12|8|1V|7|0|0|0|0|0|0|0|0|5|3|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1M|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1N|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1O|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1P|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1R|8|@]|D|@]|E|$]]|$1|W|3|X|5|L|7|1S|8|@]|D|@]|E|$M|N]]|$1|Y|3|Z|5|6|7|1T|8|@]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|10|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

<p>If you want to maintain input <code>type='number'</code> (probably for mobile devices to trigger the numeric keyboard) you should use <code>onInput</code> instead of <code>onChange</code> to capture your event changes.</p>

<p>Using <code>onInput</code> fixed a bug where typing text into a number input would bypass the validation I had assigned to it in <code>onChange</code>. Once I fixed this function to be called in <code>onInput</code> it triggered in all instances.</p>

<p>Here's an example of what I'm doing:</p>

<pre><code>&lt;input
    type='number'
    id={`player${index}Score`}
    className='form-control'
    pattern='[0-9]{0,5}'
    onInput={(event) =&gt; this.enterScore(event, index)}
    value={this.props.scoreLabel(this.state.scores[index])}
/&gt;
</code></pre>

<p>I hope this helps!</p>

<h1>EDIT - 08-03-2018:</h1>

<p>I came up with a better solution. Use type='tel' along with a pattern regex within the input component itself.</p>

<p>The nuts and bolts of how I wired this up is here:</p>

<pre><code>class Input extends React.Component {
  state = {message: '3'};

  updateNumber = (e) =&gt; {
    const val = e.target.value;
    // If the current value passes the validity test then apply that to state
    if (e.target.validity.valid) this.setState({message: e.target.value});
    // If the current val is just the negation sign, or it's been provided an empty string,
    // then apply that value to state - we still have to validate this input before processing
    // it to some other component or data structure, but it frees up our input the way a user
    // would expect to interact with this component
    else if (val === '' || val === '-') this.setState({message: val});
  }

  render() {
    return (
      &lt;input
        type='tel'
        value={this.state.message}
        onChange={this.updateNumber}
        pattern="^-?[0-9]\d*\.?\d*$"
      /&gt;
    );
  }
}

ReactDOM.render(&lt;Input /&gt;, document.getElementById('main'));
</code></pre>

<p>I have an example of this working on <a href="https://codepen.io/JimmayVV/pen/zLaZBL?editors=0010" rel="noreferrer">Codepen here</a></p>


blocks|key|1116899|text|解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116900|今天，我发现使用parseInt()也是一种良好而干净的实践。下面是一个onChange(e)示例。|offset|length|style|CODE|1116901|代码|1116902|onChange(e){
++++this.setState({[e.target.id]:+parseInt(e.target.value)+?+parseInt(e.target.value)+:+''})
}|code-block|syntax|javascript|1116903|解释|1116904|如果参数不是数字，parseInt()将返回NaN。|ordered-list-item|1116905|parseInt('12a')将返回12。|1116906|entityMap^0|0|8|A|10|B|0|0|0|0|9|A|M|3|0|0|F|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|T|3|U|5|S|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|W|$]]

<h2>Solution</h2>

<p>Today I find use <code>parseInt()</code> is also a good and clean practice. A <code>onChange(e)</code> example is below.</p>

<h3>Code</h3>

<pre><code>onChange(e){
    this.setState({[e.target.id]: parseInt(e.target.value) ? parseInt(e.target.value) : ''})
}
</code></pre>

<h2>Explanation</h2>

<ol>
<li><code>parseInt()</code> would return <code>NaN</code> if the parameter is not a number.</li>
<li><code>parseInt('12a')</code> would return 12.</li>
</ol>


blocks|key|1117287|text|我发现的最快的方法是添加这样一个onKeyPress：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1117288|<input+
++type="text"+
++name="example"
++value="Type+here"
++onKeyPress={(event)+=>+{
++++++if+(!/[0-9]/.test(event.key))+{
++++++++++event.preventDefault();
++++++}
++}}
>|code-block|syntax|javascript|1117289|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The fastest way I found was adding a onKeyPress like this:</p>
<pre><code>&lt;input 
  type=&quot;text&quot; 
  name=&quot;example&quot;
  value=&quot;Type here&quot;
  onKeyPress={(event) =&gt; {
      if (!/[0-9]/.test(event.key)) {
          event.preventDefault();
      }
  }}
&gt;
</code></pre>


blocks|key|2830132|text|我正在使用JS的isNaN函数来验证它是否是数字。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2830133|const+handleChange2+=+(e)+=>+{
++++if+(isNaN(e.target.value))+{
++++++return;
++++}
++++const+onlyNums+=+e.target.value.replace(/[%5E0-9]/g,+"");
++++setFormData({
++++++...formData,
++++++[e.target.name]:+onlyNums,
++++});
++};

++const+[formData,+setFormData]+=+useState({
++++name:+"",
++++phone:+"",
++++email:+"",
++++address:+"",
++});

++<input
++++value={phone}
++++onChange={(e)+=>+handleChange2(e)}
++++placeholder="Phone"
++++type="text"
++++name="phone"
++++required
+++/>|code-block|syntax|javascript|2830134|注意:存储在状态中的值将是字符串，如果希望它是一个数字/int，只需使用Number将其转换为整数。例:让phone=号码(formData.phone)|2830135|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I am using isNaN function of JS to verify whether it is number or not.</p>
<pre><code>const handleChange2 = (e) =&gt; {
    if (isNaN(e.target.value)) {
      return;
    }
    const onlyNums = e.target.value.replace(/[^0-9]/g, &quot;&quot;);
    setFormData({
      ...formData,
      [e.target.name]: onlyNums,
    });
  };

  const [formData, setFormData] = useState({
    name: &quot;&quot;,
    phone: &quot;&quot;,
    email: &quot;&quot;,
    address: &quot;&quot;,
  });

  &lt;input
    value={phone}
    onChange={(e) =&gt; handleChange2(e)}
    placeholder=&quot;Phone&quot;
    type=&quot;text&quot;
    name=&quot;phone&quot;
    required
   /&gt;
</code></pre>
<p>Note:The value stored in the state will string, if you want it to be a number/int just use Number to convert it into integer. ex: let phone= Number(formData.phone)</p>


blocks|key|1116981|text|我发现最有效和最简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116982|<input
++++type="number"
++++name="phone"
++++placeholder="Phone+number"
++++onKeyDown={e+=>+/[\%2B\-\.\,]$/.test(e.key)+&&+e.preventDefault()}
/>|code-block|syntax|javascript|1116983|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The most effective and simple solution I found:</p>

<pre class="lang-html prettyprint-override"><code>&lt;input
    type="number"
    name="phone"
    placeholder="Phone number"
    onKeyDown={e =&gt; /[\+\-\.\,]$/.test(e.key) &amp;&amp; e.preventDefault()}
/&gt;
</code></pre>


blocks|key|1117137|text|这里有一个onBlur的解决方案，它可能非常有用，因为它还允许您按照您需要的方式格式化数字，而不需要任何黑魔法或外部库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1117138|2020年反应钩|1117139|const+toNumber+=+(value:+string+%7C+number)+=>+{
++++if+(typeof+value+===+'number')+return+value
++++return+parseInt(value.replace(/[%5E\d]%2B/g,+''))
}

const+formatPrice+=+(price:+string+%7C+number)+=>+{
++return+new+Intl.NumberFormat('es-PY').format(toNumber(price))
}|code-block|syntax|javascript|1117140|<input
++++defaultValue={formatPrice(price)}
++++onBlur={e+=>+{
++++++const+numberValue+=+toNumber(e.target.value)
++++++setPrice(numberValue)
++++++e.target.value+=+formatPrice(numberValue)
++++}}
++++type='tel'
++++required
/>|1117141|它的工作原理：|1117142|通过defaultValue设置初始值|unordered-list-item|offset|length|style|CODE|1117143|允许用户自由地键入他们感觉到的任何内容。|1117144|onBlur+(一旦输入失去焦点)：|1117145|用空字符串替换任何不是数字的字符。|1117146|setState()或调度()来管理状态|1117147|将输入字段的值设置为数值并应用可选格式|1117148|1117149|注意:如果您的值来自异步源(例如，fetch)：由于defaultValue只会在第一次呈现时设置该值，所以您需要确保只有在数据存在之后才能呈现组件。|1117150|entityMap^0|0|0|0|0|0|2|C|0|0|1|1|1|1|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1D|8|@$P|1E|Q|1F|R|S]]|9|@]|A|$]]|$1|T|3|U|5|O|7|1G|8|@]|9|@]|A|$]]|$1|V|3|W|5|O|7|1H|8|@]|9|@]|A|$]]|$1|X|3|Y|5|O|7|1I|8|@]|9|@]|A|$]]|$1|Z|3|10|5|O|7|1J|8|@]|9|@]|A|$]]|$1|11|3|12|5|O|7|1K|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1M|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|17|$]]

<p>Here is a solution with onBlur, it can be very helpful as it also allows you to format the number the way you need it without requiring any black magic or external library.</p>
<h2>2020 React Hooks</h2>
<pre><code>const toNumber = (value: string | number) =&gt; {
    if (typeof value === 'number') return value
    return parseInt(value.replace(/[^\d]+/g, ''))
}

const formatPrice = (price: string | number) =&gt; {
  return new Intl.NumberFormat('es-PY').format(toNumber(price))
}
</code></pre>
<pre><code>&lt;input
    defaultValue={formatPrice(price)}
    onBlur={e =&gt; {
      const numberValue = toNumber(e.target.value)
      setPrice(numberValue)
      e.target.value = formatPrice(numberValue)
    }}
    type='tel'
    required
/&gt;
</code></pre>
<h3>How it works:</h3>
<ul>
<li>Set initial value via <code>defaultValue</code></li>
<li>Allow user to freely type anything they feel</li>
<li>onBlur (once the input looses focus):
<ul>
<li>replace any character that is not a digit with an empty string</li>
<li>setState() or dispatch() to manage state</li>
<li>set the value of the input field to the numeric value and apply optional formatting</li>
</ul>
</li>
</ul>
<p>Pay attention:
In case your value come from a async source (e.g. fetch): Since defaultValue will only set the value on the first render, you need to make sure to render the component only once the data is there.</p>


blocks|key|1174996|text|+<input
++++++++className="input-Flied2"
++++++++type="TEXT"
++++++++name="userMobileNo"
++++++++placeholder="Moble+No"
++++++++value={phonNumber}
++++++++maxLength="10"
++++++++onChange={handleChangeInput}
++++++++required
++++++/>

++const+handleChangeInput+=+(e)+=>+{
const+re+=+/%5E[0-9\b]%2B$/;+//rules
if+(e.target.value+===+""+%7C%7C+re.test(e.target.value))+{
++setPhoneNumber(e.target.value);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1174997|}；|unstyled|1174998|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code> &lt;input
        className=&quot;input-Flied2&quot;
        type=&quot;TEXT&quot;
        name=&quot;userMobileNo&quot;
        placeholder=&quot;Moble No&quot;
        value={phonNumber}
        maxLength=&quot;10&quot;
        onChange={handleChangeInput}
        required
      /&gt;

  const handleChangeInput = (e) =&gt; {
const re = /^[0-9\b]+$/; //rules
if (e.target.value === &quot;&quot; || re.test(e.target.value)) {
  setPhoneNumber(e.target.value);
}
</code></pre>
<p>};</p>


blocks|key|1179268|text|使用模式验证，以便允许一个点(用于小数)而不允许空格。您需要在setState()中传递一个箭头函数，以便在将状态值放回输入字段后立即更新它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1179269|*考虑类组件|1179270|给出状态变量的一些上下文。|1179271|constructor(props)+{
++super(props);
++this.state+=+{inputValue:+''};
};|code-block|syntax|javascript|1179272|输入字段内容是根据pattern正则表达式计算的。如果两者匹配，则将事件的validity.valid属性赋值为true，否则为false|CODE|1179273|<input+
+pattern+=+'[0-9]*\.?[0-9]*'+
+type+=+'text'
+value+=+{this.state.inputValue}
+onChange+=+{this.handleChange}+
...>|1179274|在handleChange中，如果validity.valid为true，状态将立即更新，否则它将保留前一个值(并且输入字段中的文本不会更改)。|1179275|handleChange+=+(e)+=>+{
++this.setState((prevState)+=>+(
++++e.target.validity.valid+?+{inputValue:+e.target.value}+:+prevState)
++)++++
};|1179276|entityMap^0|B|2|0|0|0|0|9|7|11|E|1K|4|1S|5|0|0|1|C|H|E|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|15|8|@$9|16|A|17|B|Q]|$9|18|A|19|B|Q]|$9|1A|A|1B|B|Q]|$9|1C|A|1D|B|Q]]|D|@]|E|$]]|$1|R|3|S|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|T|3|U|5|6|7|1F|8|@$9|1G|A|1H|B|Q]|$9|1I|A|1J|B|Q]]|D|@]|E|$]]|$1|V|3|W|5|L|7|1K|8|@]|D|@]|E|$M|N]]|$1|X|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|Y|$]]

<p>Use a pattern validation in order to allow <strong>one</strong> point (for decimals) and not allow spaces. You need to pass an arrow function in setState() in order to immediately update the state value, once it will be placed back in the input field.</p>
<p>*considering a class component</p>
<p>Given some context to the state variable.</p>
<pre><code>constructor(props) {
  super(props);
  this.state = {inputValue: ''};
};
</code></pre>
<p>The input field content is evaluated against the <code>pattern</code> regex. If both match, the event's <em><code>validity.valid</code></em> property is assigned as <code>true</code>, otherwise <code>false</code>:</p>
<pre><code>&lt;input 
 pattern = '[0-9]*\.?[0-9]*' 
 type = 'text'
 value = {this.state.inputValue}
 onChange = {this.handleChange} 
...&gt;
</code></pre>
<p>In <code>handleChange</code>, the state is immediately updated if <em><code>validity.valid</code></em> is true, otherwise it keeps the previous value (and the text in the input field doesn't change).</p>
<pre><code>handleChange = (e) =&gt; {
  this.setState((prevState) =&gt; (
    e.target.validity.valid ? {inputValue: e.target.value} : prevState)
  )    
};
</code></pre>


blocks|key|1117007|text|2019回复迟了，但希望它能帮助到某人|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1117008|这将确保在空的textfield中不会获得null|blockquote|1117009|Textfield值总是0。|unordered-list-item|1117010|当背行行距时，您将以0结尾。|1117011|当值为0并开始键入时，0将被替换为实际数字。|1117012|//+This+will+make+sure+that+value+never+is+null+when+textfield+is+empty

const+minimum+=+0;+++

export+default+(props)+=>+{
++++const+[count,+changeCount]+=+useState(minimum);

++++function+validate(count)+{
++++++++return+parseInt(count)+%7C+minimum
++++}

++++function+handleChangeCount(count)+{
++++++++changeCount(validate(count))
++++}

++++return+(
++++++++<Form>
++++++++++++<FormGroup>
++++++++++++++++<TextInput
++++++++++++++++++++type="text"
++++++++++++++++++++value={validate(count)}
++++++++++++++++++++onChange={handleChangeCount}
++++++++++++++++/>
++++++++++++</FormGroup>
++++++++++++<ActionGroup>
++++++++++++++++<Button+type="submit">submit+form</Button>
++++++++++++</ActionGroup>
++++++++</Form>
++++);
};|code-block|syntax|javascript|1117013|entityMap^0|0|J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|10|8|@]|D|@]|E|$]]|$1|L|3|M|5|K|7|11|8|@]|D|@]|E|$]]|$1|N|3|O|5|K|7|12|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|13|8|@]|D|@]|E|$S|T]]|$1|U|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|V|$]]

<p><strong>2019 Answer Late, but hope it helps somebody</strong></p>

<blockquote>
  <p>This will make sure you won't get null on an empty textfield</p>
</blockquote>

<ul>
<li>Textfield value is always 0</li>
<li>When backspacing, you will end with 0</li>
<li>When value is 0 and you start typing, 0 will be replaced with the actual number</li>
</ul>

<pre class="lang-js prettyprint-override"><code>// This will make sure that value never is null when textfield is empty

const minimum = 0;   

export default (props) =&gt; {
    const [count, changeCount] = useState(minimum);

    function validate(count) {
        return parseInt(count) | minimum
    }

    function handleChangeCount(count) {
        changeCount(validate(count))
    }

    return (
        &lt;Form&gt;
            &lt;FormGroup&gt;
                &lt;TextInput
                    type="text"
                    value={validate(count)}
                    onChange={handleChangeCount}
                /&gt;
            &lt;/FormGroup&gt;
            &lt;ActionGroup&gt;
                &lt;Button type="submit"&gt;submit form&lt;/Button&gt;
            &lt;/ActionGroup&gt;
        &lt;/Form&gt;
    );
};
</code></pre>



blocks|key|1117182|text|这是我对普通Javascript的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1117183|在本例中将keyup事件附加到您选择的input字段-+id。|offset|length|style|CODE|1117184|在事件处理函数中，只需用给定的正则表达式测试event.key的键。|1117185|在这种情况下，如果它不匹配，我们将阻止元素的默认操作-因此输入框中的“错误”键按下将不会被注册，因此它永远不会出现在输入框中。|1117186|++let+idField+=+document.getElementById('id');

++idField.addEventListener('keypress',+function(event)+{
++++if+(!+/([0-9])/g.test(event.key))+{
++++++event.preventDefault();
++++}
++});|code-block|syntax|javascript|1117187|这个解决方案的好处可能是它的灵活性，通过改变和/或逻辑链接正则表达式可以满足许多需求。例如，regex+/([a-z0-9-_])/g应该只匹配小写英文字母数字字符，没有空格，只允许-和_。|1117188|注意:如果您使用/[a-z]/gi+(请注意，i在末尾)将忽略字母大小写，并且仍将接受大写字母。|blockquote|BOLD|1117189|entityMap^0|0|5|5|J|5|S|2|0|M|9|0|0|0|1G|F|2J|1|2L|1|0|8|9|N|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]|$D|12|E|13|F|G]|$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1B|8|@$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]|$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|S|3|T|5|U|7|1I|8|@$D|1J|E|1K|F|G]|$D|1L|E|1M|F|V]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|X|$]]

<p>Here's my solution of plain Javascript</p>
<p>Attach a <code>keyup</code> event to the <code>input</code> field of your choice - <code>id</code> in this example.<br />
In the event-handler function just test the key of <code>event.key</code> with the given regex.</p>
<p>In this case if it doesn't match we prevent the default action of the element - so a &quot;wrong&quot; key-press within the input box won't be registered thus it will never appear in the input box.</p>
<pre class="lang-js prettyprint-override"><code>  let idField = document.getElementById('id');

  idField.addEventListener('keypress', function(event) {
    if (! /([0-9])/g.test(event.key)) {
      event.preventDefault();
    }
  });
</code></pre>
<p>The benefit of this solution may be its flexible nature and by changing and/or logically chaining regular expression(s) can fit many requirements.
E.g. the regex <code>/([a-z0-9-_])/g</code> should match only lowercase English alphanumeric characters with no spaces and only <code>-</code> and <code>_</code> allowed.</p>
<blockquote>
<p>Note: that if you use <code>/[a-z]/gi</code> (note the <strong>i</strong> at the end) will ignore
letter case and will still accept capital letters.</p>
</blockquote>


blocks|key|1117252|text|我们可以用这个操作符，就这样做。还可以使用useState将值设置为对象|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1117253|<input+id="cost"+name="cost"+type="text"+onChange+=+{e=>isNaN(e.target.value)?e.target.value="":setItem({...item,cost:parseInt(e.target.value)})}+/>+++++|code-block|syntax|javascript|1117254|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>We can use the Terinary operator and do like this. Also using useState to set the values to the object</p>
<pre><code>&lt;input id=&quot;cost&quot; name=&quot;cost&quot; type=&quot;text&quot; onChange = {e=&gt;isNaN(e.target.value)?e.target.value=&quot;&quot;:setItem({...item,cost:parseInt(e.target.value)})} /&gt;     

                   
</code></pre>


blocks|key|2829826|text|使用下面的onChange()方法定义一个输入(在我的例子中，childState包含传递给这个子组件的状态)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2829827|<input
+++...
+++value={this.props.childState.volume}
+++...
+++onChange={(e)+=>+handleChangeInteger(e,+{volume:+e.target.value})}
/>|code-block|syntax|javascript|2829828|我使用的一种方法是安装validatorJS+(npm+install+validator+--save)。|2829829|然后，我定义了一个函数handleChangeInteger，它接受一个将用于更改您的状态的对象，在本例中是{volume:+e.target.value}。注意:我需要OR条件来允许我的输入为空白，否则如果用户希望字段为空，它就不会让用户退到(删除)最后一个整数。|2829830|const+handleChangeInteger+=+(e,+obj_to_return)+=>+{
++if+(validator.isInt(e.target.value)+%7C%7C+e.target.value+==+'')+{
++++this.props.childSetState(obj_to_return)
++}
}|2829831|现在将不允许用户键入除backspace、0-9或e以外的任何内容(这是一个数字..)在输入字段中。|2829832|我引用了这篇文章来创建我的解决方案：https://stackoverflow.com/a/45676912/6169225|2829833|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/chriso/validator.js|1|https://stackoverflow.com/a/45676912/6169225^0|5|A|0|0|O|S|B|B|0|0|B|J|1I|O|0|0|0|I|18|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|M|3|N|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|1J|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1K|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|U|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]]]

<p>Define an input with an <code>onChange()</code> method like below (in my case, childState contains the state, passed down to this child component).</p>

<pre><code>&lt;input
   ...
   value={this.props.childState.volume}
   ...
   onChange={(e) =&gt; handleChangeInteger(e, {volume: e.target.value})}
/&gt;
</code></pre>

<p>One approach I used was to install <a href="https://github.com/chriso/validator.js" rel="nofollow noreferrer">validatorJS</a> (<code>npm install validator --save</code>)</p>

<p>I then defined a function <code>handleChangeInteger</code>, which takes an object that will be used to change your state, in this case, <code>{volume: e.target.value}</code>. Note: I needed the OR condition to allow my input to be blank, otherwise it would not let the user backspace (delete) the last integer if they wanted the field blank. </p>

<pre><code>const handleChangeInteger = (e, obj_to_return) =&gt; {
  if (validator.isInt(e.target.value) || e.target.value == '') {
    this.props.childSetState(obj_to_return)
  }
}
</code></pre>

<p>The user will now not be allowed to type anything other than backspace, 0-9, or e (this is a number..) in the input field.</p>

<p>I referenced this post to create my solution: <a href="https://stackoverflow.com/a/45676912/6169225">https://stackoverflow.com/a/45676912/6169225</a></p>


blocks|key|1117071|text|在阅读了所有的答案之后，我想出了这个解决方案，但没有一个真正适用于数字，只有复制和粘贴。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1117072|parseInt解决方案:失败，因为parseInt("2a")是有效的；|unordered-list-item|offset|length|style|CODE|1117073|onKeyup+sulution:在复制和粘贴、备份空间上失败；|1117074|key.which解决方案:可能会失败的复制和粘贴；|1117075|type="number“解决方案:在长数字上失败，因为javascript将40817810000000023511转换为40817810000000023500，因为它是53位语言|1117076|<input
++++name="address.line1"
++++value={values.address.line1}
++++onChange={(event:+any)+=>+{
++++++if+(isFinite(event.target.value))+{
++++++//+UPDATE+YOUR+STATE+(i+am+using+formik)
++++++setFieldValue("address.line1",+event.target.value);
++++}
++}}
/>|code-block|syntax|javascript|1117077|entityMap^0|0|0|8|I|E|0|0|H|0|0|S|A|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@$E|X|F|Y|G|H]|$E|Z|F|10|G|H]]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@$E|12|F|13|G|H]]|9|@]|A|$]]|$1|K|3|L|5|D|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@$E|16|F|17|G|H]]|9|@]|A|$]]|$1|O|3|P|5|Q|7|18|8|@]|9|@]|A|$R|S]]|$1|T|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|U|$]]

<p>After reading all the answers but none really working for numbers only with copy and paste I came up with this solution. </p>

<ul>
<li><code>parseInt</code> solution: fails as <code>parseInt("2a")</code> is valid; </li>
<li><code>onKeyup sulution:</code> fails on copy and paste, backspace;</li>
<li>key.which solution: will probably fail on copy and paste;</li>
<li>type="number" solution: fails on long numbers as <code>javascript</code> converts 40817810000000023511 into 40817810000000023500 because it is 53 bit language</li>
</ul>

<pre><code>&lt;input
    name="address.line1"
    value={values.address.line1}
    onChange={(event: any) =&gt; {
      if (isFinite(event.target.value)) {
      // UPDATE YOUR STATE (i am using formik)
      setFieldValue("address.line1", event.target.value);
    }
  }}
/&gt;
</code></pre>


blocks|key|1117224|text|您可以尝试此解决方案，因为onkeypress将直接附加到DOM元素，并将防止用户开始输入无效数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1117225|所以在反应方面没有副作用。|1117226|<input+type="text"+onKeyPress={onNumberOnlyChange}/>

const+onNumberOnlyChange+=+(event:+any)+=>+{
++++const+keyCode+=+event.keyCode+%7C%7C+event.which;
++++const+keyValue+=+String.fromCharCode(keyCode);
++++const+isValid+=+new+RegExp("[0-9]").test(keyValue);
++++if+(!isValid)+{
+++++++event.preventDefault();
+++++++return;
++++}
};|code-block|syntax|javascript|1117227|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can try this solution, since onkeypress will be attached directly to the DOM element and will prevent users from entering invalid data to begin with.</p>
<p>So no side-effects on react side.</p>
<pre><code>&lt;input type=&quot;text&quot; onKeyPress={onNumberOnlyChange}/&gt;

const onNumberOnlyChange = (event: any) =&gt; {
    const keyCode = event.keyCode || event.which;
    const keyValue = String.fromCharCode(keyCode);
    const isValid = new RegExp(&quot;[0-9]&quot;).test(keyValue);
    if (!isValid) {
       event.preventDefault();
       return;
    }
};
</code></pre>


blocks|key|1117291|text|handleChange(event)+{
++const+value+=+event.target.value
++let+finalValue;
++Number.isNaN(parseInt(value))+?+finalValue+=+0+:+finalValue+=+parseInt(value)

this.setState({financialGoal:+finalValue});

}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1117292|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>handleChange(event) {
  const value = event.target.value
  let finalValue;
  Number.isNaN(parseInt(value)) ? finalValue = 0 : finalValue = parseInt(value)

this.setState({financialGoal: finalValue});

}
</code></pre>


blocks|key|1117338|text|如果您希望将输入的.、,和(nothing)都作为一个数字处理，那么可以使用以下混合方式：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1117339|<input+
++type='number'
++pattern='[0-9]%2B([\,%7C\.][0-9]%2B)?'
++step='1'
++value={this.state.financialGoal}+
++onChange={this.handleChange}
/>|code-block|syntax|javascript|1117340|e.target.value将是一个string，然后可以在需要时解析为浮动(比如在为后端调用传递时)。这意味着financialGoal仍然是一个数字，但应该是字符串格式。|1117341|在默认情况下，十进制值或没有数字通常处理得不好，因此这样我就可以将受控的字符串输入作为一个数字。|1117342|​|1117343|class+FinancialApp+extends+React.Component+{
++constructor(props)+{
++++super(props)
++++this.state+=+{
++++++financialGoal:+'5,5'
++++}
++++this.handle
++}

++handleChange+=+(e)+=>+{
++++this.setState({
++++++financialGoal:+e.target.value
++++})
++++console.log(`${e.target.validity.valid}+${this.state.financialGoal}`)
++}

++render()+{
++++return+(+<
++++++div+>
++++++<
++++++p+>+{
++++++++this.state.financialGoal
++++++}+<+/p>+<
++++++input+placeholder+=+'finanical+goal'
++++++type+=+'number'
++++++pattern+=+'[0-9]%2B([\,%7C\.][0-9]%2B)?'
++++++step+=+'1'
++++++value+=+{
++++++++this.state.financialGoal
++++++}
++++++onChange+=+{
++++++++this.handleChange
++++++}
++++++/>+<
++++++/div>
++++)
++}
}

ReactDOM.render(+<+FinancialApp+/+>+,+document.querySelector("#app"))|1117344|<script+src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+id="app"></div>|1117345|1117346|entityMap^0|9|1|B|1|0|0|0|E|I|6|1K|D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1B|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|U|3|P|5|6|7|1E|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|W|$]]

<p>If you want to handle both <code>.</code>, <code>,</code> and <code> </code> (nothing) for the input as a number then you can use this mix:</p>
<pre><code>&lt;input 
  type='number'
  pattern='[0-9]+([\,|\.][0-9]+)?'
  step='1'
  value={this.state.financialGoal} 
  onChange={this.handleChange}
/&gt;
</code></pre>
<p>The <code>e.target.value</code> will be a <code>string</code> that can then be parsed to float when needed (like when passed for back-end call). It means that the <code>financialGoal</code> is still a number but should be in a string format.</p>
<p>Decimal value or no number is usually not handled well by default, so this way I have a controlled string input as a number.</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class FinancialApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      financialGoal: '5,5'
    }
    this.handle
  }

  handleChange = (e) =&gt; {
    this.setState({
      financialGoal: e.target.value
    })
    console.log(`${e.target.validity.valid} ${this.state.financialGoal}`)
  }

  render() {
    return ( &lt;
      div &gt;
      &lt;
      p &gt; {
        this.state.financialGoal
      } &lt; /p&gt; &lt;
      input placeholder = 'finanical goal'
      type = 'number'
      pattern = '[0-9]+([\,|\.][0-9]+)?'
      step = '1'
      value = {
        this.state.financialGoal
      }
      onChange = {
        this.handleChange
      }
      /&gt; &lt;
      /div&gt;
    )
  }
}

ReactDOM.render( &lt; FinancialApp / &gt; , document.querySelector("#app"))</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1116884|text|也许，这会对某些人有帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116885|最近我在我的应用程序中使用了这个解决方案|1116886|我不确定这是一个正确的解决办法，但效果很好。|1116887|this.state+=+{
++++inputValue:+"",
++++isInputNotValid:+false
}

handleInputValue+=+(evt)+=>+{
++++this.validationField(evt,+"isInputNotValid",+"inputValue");
}

validationField+=+(evt,+isFieldNotValid,+fieldValue+)+=>+{
+++if+(evt.target.value+&&+!isNaN(evt.target.value))+{
++++++++this.setState({+
++++++++++++[isFieldNotValid]:+false,
++++++++++++[fieldValue]:+evt.target.value,
++++++++});
++++}+else+{
++++++++this.setState({+
++++++++++++[isFieldNotValid]:+true,
++++++++++++[fieldValue]:+"",
++++++++});
++++}
}

<input+className={this.state.isInputNotValid+?+"error"+:+null}+type="text"+onChange="this.handleInputValue"+/>|code-block|syntax|javascript|1116888|主要思想是，在条件不为真和值为空之前，状态是不会更新的。|1116889|不需要使用onKeyPress，Don等，|1116890|另外，如果您使用这些方法，它们不会在触摸设备上工作。|1116891|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Maybe, it will be helpful for someone <br/>
Recently I used this solution for my App <br/>
I am not sure that is a correct solution but it works fine.</p>

<pre><code>this.state = {
    inputValue: "",
    isInputNotValid: false
}

handleInputValue = (evt) =&gt; {
    this.validationField(evt, "isInputNotValid", "inputValue");
}

validationField = (evt, isFieldNotValid, fieldValue ) =&gt; {
   if (evt.target.value &amp;&amp; !isNaN(evt.target.value)) {
        this.setState({ 
            [isFieldNotValid]: false,
            [fieldValue]: evt.target.value,
        });
    } else {
        this.setState({ 
            [isFieldNotValid]: true,
            [fieldValue]: "",
        });
    }
}

&lt;input className={this.state.isInputNotValid ? "error" : null} type="text" onChange="this.handleInputValue" /&gt;
</code></pre>

<p>The main idea, that state won't update till the condition isn't true and value will be empty. <br/>
Don't need to use onKeyPress, Down etc., <br/> also if you use these methods they aren't working on touch devices</p>


blocks|key|1117033|text|在输入字段上设置类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1117034|$(".digitsOnly").on('keypress',function+(event)+{
++++var+keynum
++++if(window.event)+{//+IE8+and+earlier
+++++++keynum+=+event.keyCode;
++++}+else+if(event.which)+{+//+IE9/Firefox/Chrome/Opera/Safari
+++++++keynum+=+event.which;
++++}+else+{
+++++++keynum+=+0;
++++}

++++if(keynum+===+8+%7C%7C+keynum+===+0+%7C%7C+keynum+===+9)+{
++++++++return;
++++}
++++if(keynum+<+46+%7C%7C+keynum+>+57+%7C%7C+keynum+===+47)+{
++++++++event.preventDefault();
++++}+//+prevent+all+special+characters+except+decimal+point
}|code-block|syntax|javascript|1117035|限制输入字段的粘贴和拖放：|1117036|$(".digitsOnly").on('paste+drop',function+(event)+{
++++let+temp=''
++++if(event.type==='drop')+{
++++++++temp+=$("#financialGoal").val()%2Bevent.originalEvent.dataTransfer.getData('text');
++++++++var+regex+=+new+RegExp(/(%5E100(\.0{1,2})?$)%7C(%5E([1-9]([0-9])?%7C0)(\.[0-9]{1,2})?$)/g);+//Allows+only+digits+to+be+drag+and+dropped
++++++++if+(!regex.test(temp))+{
+++++++++++event.preventDefault();
+++++++++++return+false;
++++++++}
++++}+else+if(event.type==='paste')+{
++++++++temp=$("#financialGoal").val()%2Bevent.originalEvent.clipboardData.getData('Text')
++++++++var+regex+=+new+RegExp(/(%5E100(\.0{1,2})?$)%7C(%5E([1-9]([0-9])?%7C0)(\.[0-9]{1,2})?$)/g);+//Allows+only+digits+to+be+pasted
++++++++if+(!regex.test(temp))+{
+++++++++++event.preventDefault();
+++++++++++return+false;
++++++++}
++++}
}|1117037|在页面加载后立即调用componentDidMount()中的这些事件来应用类。|1117038|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Set class on your input field:</p>

<pre><code>$(".digitsOnly").on('keypress',function (event) {
    var keynum
    if(window.event) {// IE8 and earlier
       keynum = event.keyCode;
    } else if(event.which) { // IE9/Firefox/Chrome/Opera/Safari
       keynum = event.which;
    } else {
       keynum = 0;
    }

    if(keynum === 8 || keynum === 0 || keynum === 9) {
        return;
    }
    if(keynum &lt; 46 || keynum &gt; 57 || keynum === 47) {
        event.preventDefault();
    } // prevent all special characters except decimal point
}
</code></pre>

<p>Restrict paste and drag-drop on your input field:</p>

<pre><code>$(".digitsOnly").on('paste drop',function (event) {
    let temp=''
    if(event.type==='drop') {
        temp =$("#financialGoal").val()+event.originalEvent.dataTransfer.getData('text');
        var regex = new RegExp(/(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/g); //Allows only digits to be drag and dropped
        if (!regex.test(temp)) {
           event.preventDefault();
           return false;
        }
    } else if(event.type==='paste') {
        temp=$("#financialGoal").val()+event.originalEvent.clipboardData.getData('Text')
        var regex = new RegExp(/(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/g); //Allows only digits to be pasted
        if (!regex.test(temp)) {
           event.preventDefault();
           return false;
        }
    }
}
</code></pre>

<p>Call these events in componentDidMount() to apply the class as soon as the page loads.</p>


<p>I'm trying to exclude minus and plus from input, but it's going wrong:</p>

<pre class="lang-js prettyprint-override"><code>handleChange(event) {
  const value = event.target.value.replace(/\+|-/ig, '');
  this.setState({financialGoal: value});
}
</code></pre>

<p>Render input code:</p>

<pre class="lang-html prettyprint-override"><code>&lt;input style={{width: '150px'}} type="number" value={this.state.financialGoal} onChange={this.handleChange}/&gt;
</code></pre>


Only numbers. Input number in React

33 天实现自己的 AI 进化论？发文瓜分机械键盘、耳机等万元奖池！点击参加活动：<a href="https://cloud.tencent.com/developer/article/2503022" target="_blank">https://cloud.tencent.com/developer/article/2503022</a><br/> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/01543e0407db10898a7ee9f420794432.jpg"/>

技术创作特训营有奖征文

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云AI代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

文章&问答评论现已支持表情

我试图从输入中排除减号和加号，但是它出错了：handleChange(event) {  const value = event.target.value.replace(/\+|-/ig, '');  this.setState({financialGoal: value});}呈现输入代码：<input style={{width: '150px'}} type="number" value=

问只有数字。反应输入数
EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问只有数字。反应输入数EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问只有数字。反应输入数
EN