ReactJS Material-UI：如何让TextField仅接受正无符号整数值

没问题，我来帮你搞定这个需求！你当前的代码虽然设置了type="number"和min:1，但浏览器默认的数字输入框还是允许输入-、+、.甚至e（科学计数法）这些字符对吧？下面给你几个实用的解决方案，从简单到全面都有：

方法1：通过onChange过滤非法字符（基础版） #

核心思路是在输入变化时，直接过滤掉所有非数字的字符，同时确保值是正整数。你可以修改现有的handleChangeField方法，或者单独写一个处理金额的回调：

// 单独编写金额输入的处理函数
const handleAmountChange = (e) => {
  // 用正则替换掉所有非数字字符
  const cleanValue = e.target.value.replace(/[^0-9]/g, '');
  // 确保值不为空时是正整数，空值保留（根据你的需求调整）
  const validValue = cleanValue === '' ? '' : Math.max(1, parseInt(cleanValue, 10)).toString();
  // 调用原有的handleChangeField方法更新状态
  this.handleChangeField('amount')({ target: { value: validValue } });
};

// 更新后的TextField组件
<TextField
  fullWidth
  type="text"  // 改成text类型，避免浏览器数字控件的干扰
  placeholder={'[1-100]'}
  id="simple-start-adornment"
  onChange={handleAmountChange}
  inputProps={{ 
    min: 1,
    max: 100,
    pattern: "[0-9]*",  // HTML原生正则限制输入字符
    inputMode: "numeric"  // 移动端自动弹出数字键盘，提升体验
  }}
/>

这个方法的好处是能覆盖所有输入场景（包括粘贴非法内容），同时通过inputMode保证移动端的输入体验。

方法2：通过onKeyDown阻止非法按键（快速版） #

如果你不想修改type，可以直接在InputProps里添加onKeyDown事件，阻止非法按键的默认行为：

<TextField
  fullWidth
  type="number"
  placeholder={'[1-100]'}
  id="simple-start-adornment"
  onChange={this.handleChangeField('amount')}
  InputProps={{
    inputProps: { 
      min: 1,
      max: 100
    },
    onKeyDown: (e) => {
      // 列出所有需要禁止的按键
      const forbiddenKeys = ['-', '+', '.', ',', 'e'];
      if (forbiddenKeys.includes(e.key)) {
        e.preventDefault(); // 阻止按键输入
      }
    }
  }}
/>

注意：这个方法只能阻止按键输入，如果用户通过粘贴、拖拽等方式输入非法字符，还是会生效，所以建议配合方法1一起使用。

方法3：双重保障（推荐版） #

把上面两种方法结合起来，既阻止非法按键，又过滤输入值，同时加上最大值限制（你placeholder里写了[1-100]），确保万无一失：

const handleAmountChange = (e) => {
  let cleanValue = e.target.value.replace(/[^0-9]/g, '');
  // 限制最大值为100
  if (cleanValue && parseInt(cleanValue, 10) > 100) {
    cleanValue = '100';
  }
  // 确保最小值为1（空值保留的话可以去掉这行）
  cleanValue = cleanValue === '' ? '' : Math.max(1, parseInt(cleanValue, 10)).toString();
  this.handleChangeField('amount')({ target: { value: cleanValue } });
};

<TextField
  fullWidth
  type="text"
  placeholder={'[1-100]'}
  id="simple-start-adornment"
  onChange={handleAmountChange}
  InputProps={{
    inputProps: {
      min: 1,
      max: 100,
      pattern: "[0-9]*",
      inputMode: "numeric"
    },
    onKeyDown: (e) => {
      const forbiddenKeys = ['-', '+', '.', ',', 'e'];
      if (forbiddenKeys.includes(e.key)) {
        e.preventDefault();
      }
    }
  }}
/>

这个方案能覆盖所有输入场景，同时兼顾了用户体验和输入合法性，非常适合你的需求。

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