reactjs - 如何在reactjs中只允许文本框中的数字？答案

【问题标题】：How to allow only numbers in textbox in reactjs?reactjs - 如何在reactjs中只允许文本框中的数字？
【发布时间】：2017-03-28 10:57:01
【问题描述】：

如何仅使用正则表达式在 reactjs 的文本框中只允许数字？

【问题讨论】：

标签： reactjs

【解决方案1】：

基本思路是：

使用controlled component（使用输入字段的值和onChange属性），在onChange句柄内部检查输入的值是否正确。仅当输入的值为有效数字时才更新状态。

为此使用这个regex：/^[0-9\b]+$/;

onChange 处理程序将是：

onChange(e){
    const re = /^[0-9\b]+$/;

    // if value is not blank, then test the regex

    if (e.target.value === '' || re.test(e.target.value)) {
       this.setState({value: e.target.value})
    }
}

工作示例：

class App extends React.Component{
   constructor(){
      super();
      this.state = {value: ''};
      this.onChange = this.onChange.bind(this)
   }
   
   onChange(e){
      const re = /^[0-9\b]+$/;
      if (e.target.value === '' || re.test(e.target.value)) {
         this.setState({value: e.target.value})
      }
   }
   
   render(){
     return <input value={this.state.value} onChange={this.onChange}/>
   }
}

ReactDOM.render(<App/>,document.getElementById('app'))

<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>

<div id='app'/>

【讨论】：

正则表达式/^[0-9\b]+$/中\b的作用是什么？
回答 Axel 的问题给其他想知道的人：\b \B word, not-word boundary
如何同时添加最大长度检查？
@MayankShukla re.test(e.target.value) 就足够了，您无需检查是否为空
这是唯一有效的。其他不支持退格。

【解决方案2】：

Mayank Shukla 提供的答案是正确的，毫无疑问。

但是，您可以使用默认的 html 属性 type="number" 来代替它。

在这种情况下不需要使用正则表达式，因为<input type="number" value={this.state.value} onChange={this.onChange}/> 将只接受数字。

【讨论】：

旧的浏览器呢？
不用担心。所有浏览器都支持它，因为它是默认的 HTML 属性并且很久以前就实现了。
我记得那个类型号在一些旧的 android 浏览器上给了我一些问题，老实说太久以前不记得是哪个了。无论如何，我会去一个正则表达式......以防万一
它仍然允许一些特殊字符，如'e'、'.'、'-'等

【解决方案3】：

一个简单的解决方案，使用钩子：

const [age, setAge] = useState();

const handleChange = (e) => {
  const value = e.target.value.replace(/\D/g, "");
  setAge(value);
};

return (
  <div>
    <input value={age} onChange={handleChange} />
  </div>
);

示例：https://codesandbox.io/s/adoring-minsky-9sqvv

【讨论】：

【解决方案4】：

即使你说的是正则表达式，这在谷歌中只是高位，没有指定正则表达式（因为标题中没有说明）所以我想我会添加另一种简单的方法，而不是使用正则表达式。鉴于下面链接的测试结果，将正则表达式用于简单的用例似乎很愚蠢。

我在另一个找不到的帖子上找到了这个。我相信它被称为自相等检查......不完全确定它是如何工作的。但它至少比 Chrome 中的 Regex 快 20 倍（从测试结果来看）。

isNumeric(number) {
  if (+number === +number) { // if is a number
      return true;
  }

  return false;
}

Benchmarking self-equals vs regex vs NaN

在页面底部有对该测试的修订，编号 5 对应于我发现有这个简单解决方案的帖子，我不确定其他修订有何不同。

我只将它用于我的正数文本框，如下所示：

isValidQuantityInput() {
  const value = +this.state.quantityInputText; // convert to number
  if (value !== +value || value < 0) { // if fails validity check
    return false;
  }

  return true;
}

我没有将输入的值绑定到数据，因为这会导致奇怪的可用性问题，例如无法在不突出显示的情况下清除字段等...quantityInputText 保存输入文本，然后我验证它并如果它有效，我将我的数据设置为它的值。

【讨论】：

【解决方案5】：

根据 www.w3schools.com 最简单且远非复杂的方法：

onHandleChangeNumeric = e => {
 let valu = e.target.value;

 if (!Number(valu)) {
 return;
 }

 this.setState({ [e.target.name]: valu });
};

关于渲染输入：

<input
   type="text"
   className="form-control"
   name="someName"
   value={this.state.someName}
   onChange={this.onHandleChangeNumeric}
    />

重要提示：不要让 type="number"，它不会起作用。

【讨论】：

这对我使用新的 Hooks 有帮助。只需更改 ``` this.setState({e.target.name]: value });``` 为 ``` onChange(e.target.value)``` 并在 @987654324 中使用 onChange={e=>onHandleChangeNumeric(e)} @组件。

【解决方案6】：

countDecimals(value) {
  return value % 1 ? value.toString().split(".")[1].length : 0;
};

handleOnChangeAmount(id, e) {
  let count = this.countDecimals(e.target.value);
  if (count === 3) {
    e.preventDefault();
  }
}

【讨论】：

【解决方案7】：

我知道您要求使用正则表达式。
但如果有人愿意，这里有一个没有正则表达式的解决方案。


  const handlePincode = (e) => {
    !isNaN(e.nativeEvent?.data) && setPincode(e.currentTarget.value);
  };

  return (
    <div className="App">
      <input type="text" value={pincode} onChange={handlePincode} />
    </div>
  );

event.nativeEvent.data 给了我当前键入的值，我可以验证它并设置 event.currentTarget.value 或直接返回它。

【讨论】：

【解决方案8】：

检查文本框中的字符串是否为数字最方便的解决方案是Gibrahh's solution，但为了避免自我比较，您应该按照以下方式进行比较：

typeof x === 'number' && isNaN(x)

其中 x 是来自文本框输入的数字字符串。

因此，如果您使用 create-react-app 进行开发，ESLint 不会对您大喊大叫。见https://eslint.org/docs/rules/no-self-compare。

【讨论】：

【解决方案9】：

import React, { useState } from "react";

const SingleCart = () => {
    const [num, setNum] = useState();

    const handleChange = (event) => {
        const value = event.target.value.replace(/\+|-/gi, "");

        if (value.length) {
      const number = parseInt(value);
      setNum(number);
    }
  };
  return (
    <div>
      <input value={num} onChange={handleChange} />
    </div>
  );
};
 
 ReactDOM.render(<SingleCart/>,document.getElementById('app'))

【讨论】：

【解决方案10】：

简单的解决方法，你只需创建以下函数

const NumericOnly= (e) => { //angka only
     const reg = /^[0-9\b]+$/
     let preval=e.target.value
     if (e.target.value === '' || reg.test(e.target.value)) return true
     else e.target.value = preval.substring(0,(preval.length-1))
}

并将其实施到您的表单中

<input 
type="text"
className="form-control"
name="kodepos"
onChange={NumericOnly}
/>

不需要 setState 或 useState！

如果你把函数放入helper中，并以各种形式放在你需要的地方，那就太好了

【讨论】：

【解决方案11】：

`

import React, { useState } from 'react';

export default function Demo() {
const [contact, setcontact] = useState('');

const handleContact = (e) => {
         if(e.target.value>='0' && e.target.value<='9' ) setcontact(e.target.value);
    }
    
     return (
      <div>
        <form>
          <div className="form-group">
            <label>Contact No.</label>
              <input type="text" className="form-control" id="contact" onChange={handleContact} value={contact} placeholder="Contact No." required="required"  />
           </div>
        </form>
      </div>
     )
}

`这里有一个简单的方法来实现在ReactJs的基于函数的组件中的'text'类型的输入字段中只输入数值的条件。我亲自在很多地方实现了这一点，它确实有效。

干杯！！

【讨论】：

【解决方案12】：

<input/> 组件有模式道具，在这个道具上我们可以直接使用这个正则表达式：/^[0-9\b]+$/。;

<input type="text" pattern="^[0-9\b]+$" />

// or if you want to include ".", then the following pattern will work fine.
<input type="text" pattern="^[0-9]*[.,]?[0-9]*$" />

【讨论】：