Reactjs 使用材质UI文本字段限制钩形长度和类型

鉴于下面的代码，我无法限制用户可以输入文本字段和控制输入类型的位数

如果我删除了

类型：“number”

，则可以控制输入长度，但现在可以输入字母了

如果我删除了

maxLength:4

，则无法控制输入长度，但不再允许使用字母

如果I设置

inputProps={{maxLength:4，键入：“number”}

如下所示，则仅强制执行

键入：“number”

输入约束

我能做些什么来解决这个问题

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
      width: "25ch"
    }
  }
}));

export default function BasicTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        inputProps={{ maxLength: 4, type: "number" }}
      />
    </form>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/TextField”导入TextField；
const useStyles=makeStyles（（主题）=>({
根目录：{
"& > *": {
边距：主题。间距（1），
宽度：“25厘米”
}
}
}));
导出默认函数BasicTextFields（）{
const classes=useStyles（）；
返回(
);
}

maxlength不适用于数字输入，您需要使用最小值和最大值的组合

用户仍可以输入高于最大值的值，但验证将显示为错误。如果他们使用微调器，这将是它的最大值

标签{
显示：块；
}

text-maxlength=4
数字-maxlength=4
数字-最大值=999&；最小值=-999

maxlength不适用于数字输入，您需要使用最小值和最大值的组合

用户仍可以输入高于最大值的值，但验证将显示为错误。如果他们使用微调器，这将是它的最大值

标签{
显示：块；
}

text-maxlength=4
数字-maxlength=4
数字-最大值=999&；最小值=-999