Material UI TextField使用pattern正则限制仅输入数字不生效如何解决

MUI的TextField是上层封装组件，直接写在组件标签上的pattern属性会被挂载到组件外层的DOM节点上，不会传递给内部真正的原生输入框元素，所以校验规则不生效。

场景1：仅需要表单提交时做校验 #

如果你的校验是在表单提交阶段触发，只需要通过inputProps属性将pattern透传给原生input即可，示例代码如下：

<TextField
  name="salary"
  value={salary}
  variant="outlined"
  size="small"                          
  fullWidth
  autoComplete="off"
  // 通过inputProps透传属性给原生输入框
  inputProps={{
    pattern: "[0-9]+",
    title: "仅允许输入数字" // 校验不通过时的浏览器默认提示内容
  }}
/>

该写法下，把TextField放在原生<form>标签内提交时，浏览器会自动校验输入内容是否匹配pattern规则，不符合的话会弹出title对应的提示。

场景2：需要输入时实时拦截非数字内容 #

原生pattern属性仅会在表单提交时触发校验，不会拦截输入过程中的非法字符。如果需要实现输入时就禁止输入非数字，可以配合onInput事件做实时过滤，示例如下：

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

const Demo = () => {
  const [salary, setSalary] = useState("");

  const handleInput = (e) => {
    const inputValue = e.target.value;
    // 仅当输入内容匹配数字规则时才更新状态
    if (/^[0-9]*$/.test(inputValue)) {
      setSalary(inputValue);
    }
  }

  return (
    <TextField
      name="salary"
      value={salary}
      variant="outlined"
      size="small"                          
      fullWidth
      autoComplete="off"
      onInput={handleInput}
      inputProps={{
        pattern: "[0-9]+",
        title: "仅允许输入数字"
      }}
    />
  )
}

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