在 React 中只输入数字
对于希望用户输入金额的电子商务网站，这是确保用户只允许输入数字的理想方法。这也适用于填表网站、现金应用程序、银行应用程序等。
有许多方法可以将此功能应用于 Web 应用程序。让我们看看其中的一些。
在 React 中使用数字模式方法
这种方法采用了一种完全相反的方法。它的输入类型是文本，通常应该是字母，但神奇的是把模式设置为只有数字。
在我们的项目文件夹中，我们导航到 index.js 文件并输入以下代码：
代码片段 - index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
financialGoal: ''
}
}
handleChange(evt) {
const financialGoal = (evt.target.validity.valid) ? evt.target.value : this.state.financialGoal;
this.setState({ financialGoal });
}
render() {
return (
<input type="text" pattern="[0-9]*" onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />
)
}
}
ReactDOM.render(<Example />, document.body);
首先，将组件的初始状态设置为' '，因此输入栏为空，然后我们将组件绑定到 handleChange 事件侦听器以验证输入是否仅为数字。因此，当我们在输入栏中输入字符时，事件侦听器会启动以检查输入的内容是否符合要求。
输出：
在 React 中使用输入 type='tel' 方法
当用户需要在必填字段中输入他们的电话号码时，通常采用'tel'类型的输入法。但这种方法也适用于我们希望客户仅输入数字并且需要添加具有某些参数的模式的情况。
代码片段 - index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
class Input extends React.Component {
state = {message: ''};
updateNumber = (e) => {
const val = e.target.value;
if (e.target.validity.valid) this.setState({message: e.target.value});
else if (val === '' || val === '-') this.setState({message: val});
}
render() {
return (
<input
type='tel'
value={this.state.message}
onChange={this.updateNumber}
pattern="^-?[0-9]\d*\.?\d*$"
/>
);
}
}
ReactDOM.render(<Input />, document.getElementById('main'));
我们将 updateNumber 组件分配给 onChange 事件侦听器，以便在输入字段中输入字符时。事件侦听器被触发，然后运行目标有效性函数以确保在输入字段中键入的内容仅为数字。
输出：
在 React 中使用递增数字方法
此示例仅允许用户通过使用输入栏末端的向上或向下箭头来增加或减少数字来选择数字。此方法非常适用于用户想要选择日期或在线投票情况的 Web 表单。
代码片段 - index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
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 (
<input style={{width: '150px'}} type="number" onKeyPress={this.onKeyPress.bind(this)} />
)
}
ReactDOM.render(<Input /> , document.body);
onKeyPress 事件处理程序与 keyCode 一起使用以检查用户正在按下的键。
输出：
结论
制作输入字段编号的想法对客户非常有帮助。它消除了他们是否可以在输入字段中输入其他字符的混淆。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn