Question

如何只允许使用textbox的{{1}} reactjs中的数字？

Answer 1

基本理念是：

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

为此使用此正则表达式：/^[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'/>

Answer 2

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

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

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

Answer 3

根据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”，否则将无法正常工作。

Answer 4

即使您说的是正则表达式，在Google中也没有指定正则表达式（标题中没有说明），这还是很高的，所以我想我会添加另一种简单的方式，不使用正则表达式。考虑到下面链接的测试结果，对于简单的用例使用正则表达式似乎很愚蠢。

我在另一个我找不到的帖子上找到了这个。我相信这被称为自我平等检查。但这比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保留输入文本，然后验证它是否有效，我将数据设置为其值。

Answer 5

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();
  }
}

Answer 6

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

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

Answer 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或返回它。

Answer 8

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

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

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

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

Answer 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'))

Answer 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里面，然后把它放在任何你需要的地方，那就太好了

如何只允许reactjs中的文本框中的数字？

10 个答案: