react如何让input只能填数字
限制输入为数字的方法
在React中限制<input>只能输入数字，可以通过以下几种方式实现：
1. 使用type="number"属性
<input type="number" />这种方法会显示数字输入框的增减按钮，但无法完全阻止用户通过键盘输入非数字字符。
2. 结合onChange事件处理
function NumberInput() {
const [value, setValue] = useState('');
const handleChange = (e) => {
const result = e.target.value.replace(/\D/g, '');
setValue(result);
};
return <input value={value} onChange={handleChange} />;
}使用正则表达式/\D/g移除所有非数字字符。
3. 使用pattern属性（HTML5）
<input type="text" pattern="[0-9]*" />这种方法会在表单提交时验证，但不会实时阻止输入。
4. 完全控制输入（推荐方案）
function StrictNumberInput() {
const [value, setValue] = useState('');
const handleKeyPress = (e) => {
if (!/[0-9]/.test(e.key)) {
e.preventDefault();
}
};
return (
<input
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyPress={handleKeyPress}
/>
);
}这种方法通过onKeyPress事件直接阻止非数字字符的输入。
处理特殊情况
允许小数点和负号
const handleChange = (e) => {
const result = e.target.value.replace(/[^0-9.-]/g, '');
setValue(result);
};限制小数点数量
const handleChange = (e) => {
const value = e.target.value;
if (value.split('.').length > 2) return; // 阻止多个小数点
setValue(value.replace(/[^0-9.]/g, ''));
};移动端兼容性
对于移动设备，建议同时使用inputMode属性：
<input type="text" inputMode="numeric" pattern="[0-9]*" />这会调出数字键盘，改善移动端用户体验。
