MUI 文本字段数字类型最小值最大值不起作用

Question

Material UI 版本："@mui/material": "^5.15.15",

这是片段代码

<TextField
 className="input-quantity form-input"
 defaultValue={0}
 name={"quantity"}
 type="number"
 InputProps={{
    inputProps: {
      min: 0,
      max: 100,
    },
 }}
 onChange={(event: any) =>
    handleChange(e)
 }
/>

输入仍然可以超过100，甚至千值。

这也发生在文本类型上，因为 inputProps 使用了 maxLength

Answer 1

InputProps 属性在 Material-UI 的组件中处理。 用户仍然可以输入指定范围之外的值

你可以尝试这样的事情：

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

  const handleChange = (event) => {
    const value = event.target.value;
    if (value >= 0 && value <= 100) {
      setQuantity(value);
    }
  };

  return (
    <TextField
      className="input-quantity form-input"
      value={quantity}
      name="quantity"
      type="number"
      InputProps={{
        inputProps: {
          min: 0,
          max: 100,
        },
      }}
      onChange={handleChange}
    />
  );
};

Answer 2

<TextField
  className="input-quantity form-input"
  defaultValue={0}
  name="quantity"
  type="number"
  InputProps={{
    inputProps: {
      min: 0,
      max: 100,
    },
  }}
  onChange={(event: any) => handleChange(event)}
  onInput={(e) => {
    const numericValue = parseFloat(e.target.value);

    // Check if the numeric value exceeds the max value (100)
    if (!isNaN(numericValue) && numericValue > 100) {
      e.target.value = "100";
    }

    // Check if the numeric value is below the min value (0)
    if (!isNaN(numericValue) && numericValue < 0) {
      e.target.value = "0";
    }
  }}
/>