如何在Material UI的TextField中禁止输入字母并仅允许正数字输入且保留数字类型

完整修改后代码 #

import { useState } from 'react';
import TextField from '@mui/material/TextField';

// 组件内部逻辑示例
const [kpoints, setKpoints] = useState({
  distance: 1 // 初始值为数字类型
});
const [distanceError, setDistanceError] = useState('');

const handleDistanceChange = (e) => {
  const inputVal = e.target.value.trim();
  // 空值可根据业务需求调整处理逻辑，示例默认转0
  const numVal = inputVal ? Number(inputVal) : 0;
  // 正数值校验
  if (numVal <= 0) {
    setDistanceError('请输入大于0的有效数值');
  } else {
    setDistanceError('');
    // 更新状态时始终存储数字类型
    setKpoints(prev => ({...prev, distance: numVal}));
  }
}

// TextField组件配置
<TextField
  label={distanceError}
  error={!!distanceError}
  // 改用受控组件绑定value，值始终为数字类型
  value={kpoints.distance}
  onBlur={handleDistanceChange}
  onKeyDown={(evt) => {
    // 放行必要功能键，保证正常编辑操作
    const allowedFuncKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter'];
    if (allowedFuncKeys.includes(evt.key)) return;
    // 仅允许数字和小数点（如果只允许整数，可把正则改为/^[0-9]$/，删除小数点判断逻辑）
    const isValidInput = /^[0-9.]$/.test(evt.key);
    if (!isValidInput) {
      evt.preventDefault();
      return;
    }
    // 避免重复输入小数点
    if (evt.key === '.' && evt.target.value.includes('.')) {
      evt.preventDefault();
    }
  }}
  InputLabelProps={{
    shrink: true,
  }}
  inputProps={{
    min: 0,
    id: 'distance-input',
    style: {textAlign: 'center'},
  }}
  variant="outlined"
  size="small"
  type="number"
  aria-label="Distance in angstroms input"
/>

需求实现说明 #

• 禁止输入大小写字母：通过正则校验按键输入内容，仅放行数字、可选小数点和必要编辑功能键，所有大小写字母、+-特殊符号等不符合规则的输入会被直接拦截，无需额外单独配置字符黑名单。
• 保持值为数字类型：将原非受控的defaultValue写法改为受控组件模式，绑定value为数字类型的状态，在失焦/输入变更时统一将输入框返回的字符串值转为Number类型后再更新状态，全程保证存储的数值为数字类型，不会出现类型自动转为字符串的问题。

若业务仅允许输入正整数，只需将上述代码中校验输入的正则改为/^[0-9]$/，同时删除重复小数点判断逻辑即可。

内容的提问来源于stack exchange，提问作者aharrrisssss