MUI v5.15.15 TextField number类型min/max及text类型maxLength失效求助

一、数字类型TextField（type="number"）的min/max限制问题 #

原生HTML的min/max属性仅限制**步进按钮（上下箭头）**和表单提交时的校验，无法阻止用户手动输入超出范围的数值，需要通过onChange事件手动处理输入值的校验：

1. 受控组件模式下，在handleChange中对输入值做范围限制：

const [quantity, setQuantity] = useState(0);

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const value = parseInt(event.target.value, 10);
  // 处理非数字输入，默认设为0
  const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(100, value));
  setQuantity(validValue);
};

// 组件使用
<TextField
  className="input-quantity form-input"
  value={quantity}
  name="quantity"
  type="number"
  InputProps={{
    inputProps: {
      min: 0,
      max: 100,
    },
  }}
  onChange={handleChange}
/>

2. 若需保留非受控模式，可在onChange中直接修正输入框的值：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const value = parseInt(event.target.value, 10);
  const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(100, value));
  // 直接修改输入框的值
  event.target.value = validValue.toString();
  // 执行原有业务逻辑
  // ...你的其他处理代码
};

二、文本类型TextField的maxLength失效问题 #

1. 确认属性传递层级：
   确保maxLength通过InputProps.inputProps正确传递到原生input元素：

<TextField
  type="text"
  InputProps={{
    inputProps: {
      maxLength: 10, // 此处设置文本最大长度
    },
  }}
/>

2. 处理特殊场景的溢出：
   原生maxLength多数场景有效，但粘贴超长文本等操作可能绕过限制，可在onChange中手动截断：

const [text, setText] = useState("");

const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const inputValue = event.target.value;
  // 截断到指定长度
  const truncatedValue = inputValue.slice(0, 10);
  setText(truncatedValue);
};

<TextField
  type="text"
  value={text}
  onChange={handleTextChange}
/>

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