React.js 中创建一个只有数字的输入字段
要使用React.js 创建一个仅包含允许的数字的输入字段:
- 将输入字段的类型设置为文本。
- 添加一个删除所有非数字值的 onChange 事件处理程序。
- 将输入值保存在状态变量中。
import {useState} from 'react';
const App = () => {
const [value, setValue] = useState('');
const handleChange = event => {
const result = event.target.value.replace(/\D/g, '');
setValue(result);
};
console.log(value);
console.log(typeof value);
console.log(Number(value));
return (
<div>
<div>!Hello 123 World 456?___</div>
<input
type="text"
placeholder="Your fav number"
value={value}
onChange={handleChange}
/>
</div>
);
};
export default App;
我们使用 useState 钩子来跟踪输入字段的值。
我们将以下 2 个参数传递给 String.replace 方法以删除所有非数字字符。
- regexp 我们要在字符串中匹配的正则表达式
- replacement 每次匹配要替换的值
\D 字符匹配非数字字符。
我们添加了 g(全局)标志以匹配所有非数字字符并用空字符串替换它们。
我们可能必须处理用户未在输入字段中输入任何数字的情况。
那么状态变量将是一个空字符串,我们可能不想将空字符串转换为数字,因为我们会得到 0。
import {useState} from 'react';
const App = () => {
const [value, setValue] = useState('');
const handleChange = event => {
const result = event.target.value.replace(/\D/g, '');
setValue(result);
};
console.log(value);
console.log(typeof value);
console.log(Number(value));
// 👇️ validation
if (value !== '') {
const num = Number(value);
// 👉️ submit form
}
return (
<div>
<div>!Hello 123 World 456?___</div>
<input
type="text"
placeholder="Your fav number"
value={value}
onChange={handleChange}
/>
</div>
);
};
export default App;
我们可以确保输入不存储空字符串值,然后将该值转换为数字。
或者,我们可以使用输入类型编号,但这将允许用户输入 e、-、. 等字符。
import {useState} from 'react';
const App = () => {
const [value, setValue] = useState('');
const handleChange = event => {
setValue(event.target.value);
};
console.log(value);
console.log(typeof value);
console.log(Number(value));
return (
<div>
<div>.Hello- 123 World 456?___</div>
<input
type="number"
placeholder="Your fav number"
value={value}
onChange={handleChange}
/>
</div>
);
};
export default App;
这种方法还允许用户输入我们可能不需要的值,如 e-123。
一般来说,我建议不要使用这种方法,因为它更依赖于浏览器——不同的浏览器可能会以不同的方式处理输入类型的数字。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。