如何仅使用正则表达式在reactjs中只允许文本框中的数字？
如何在reactjs中只允许文本框中的数字？
IT技术
reactjs
2021-04-19 05:15:02
6个回答
基本思路是：
使用受控组件（使用输入字段的 value 和 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'/>毫无疑问，Mayank Shukla提供的答案是正确的。
但是，您可以使用默认的 html 属性来代替它
type="number"。
在这种情况下不需要使用正则表达式，因为<input type="number" value={this.state.value} onChange={this.onChange}/>它只接受数字。
一个简单的解决方案，使用钩子：
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>
);
即使您只说正则表达式，这在 Google 中也很重要，而没有指定正则表达式（因为标题中没有说明），所以我想我会添加另一种简单的方法，而不是使用正则表达式。鉴于下面链接的测试结果，在简单用例中使用正则表达式似乎很愚蠢。
我在另一个帖子上找到了这个，我再也找不到了。我相信它被称为自我等于检查......不完全确定它是如何工作的。但它至少比 Chrome 中的 Regex 快 20 倍（从测试结果来看）。
isNumeric(number) {
if (+number === +number) { // if is a number
return true;
}
return false;
}
页面底部对此测试进行了修订，编号 5 是与我发现的具有此简单解决方案的帖子相对应的修订，我不确定其他修订有何不同。
我将它用于我的正数文本框，如下所示：
isValidQuantityInput() {
const value = +this.state.quantityInputText; // convert to number
if (value !== +value || value < 0) { // if fails validity check
return false;
}
return true;
}
我没有将输入的值绑定到数据，因为这会导致奇怪的可用性问题，例如无法在不突出显示的情况下清除字段等......quantityInputText保存输入文本，然后我验证它，如果它有效我设置我的数据的value。
根据 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"，它不会工作。