Reactjs 未强制执行InputProps最小值和最大值

我有以下表格：

const handleSubmit = (event) => {
      //Make a network call somewhere
      event.preventDefault();
      console.log("submitted");
  }
<form onSubmit={handleSubmit}>
              <TextField
                InputProps={{ inputProps: { min: 5, max: 11 } }}
                onChange={e => setName(e.target.value)}
                required
              />

              <Button
                type="submit"
              >
                Submit
              </Button>
            </form>

但是，如果表格中的字符数少于5个甚至超过11个，我可以提交表格。如何强制执行最小/最大值？

这应该可以

...
<TextField
    inputProps={{ min: 5, max: 11, type:"number" }}
    onChange={e => setName(e.target.value)}
    required
/>
...

在中清楚地提到了这一点，您必须使用inputProps作为本机输入属性，即小i

这应该可以

...
<TextField
    inputProps={{ min: 5, max: 11, type:"number" }}
    onChange={e => setName(e.target.value)}
    required
/>
...

在中清楚地提到了这一点，您必须使用inputProps作为本机输入属性，即小i

---

属性max和min适用于数字类型的输入。所以您需要将输入类型设置为number，此外还需要将inputProps设置为和属性的对象

 <TextField
    inputProps={{ min: 5, max: 11, type: "number" }}
    onChange={e => setName(e.target.value)}
    required
  />

---

属性max和min适用于数字类型的输入。所以您需要将输入类型设置为number，此外还需要将inputProps设置为和属性的对象

 <TextField
    inputProps={{ min: 5, max: 11, type: "number" }}
    onChange={e => setName(e.target.value)}
    required
  />

---

我相信您正在寻找的是minlength和maxlength：

---

我建议您在不同的浏览器上测试对这些属性的支持。

我相信您需要的是minlength和maxlength：

 <TextField
    inputProps={{ min: 5, max: 11, type: "number" }}
    onChange={e => setName(e.target.value)}
    required
  />

---

我建议您在不同的浏览器上测试这些属性的支持。

不起作用。同样的事情…允许我提交表单anywaystry来添加type属性type:number以及min和maxnot。同样的事情…允许我提交表单anywaystry来添加type属性type:number以及min和max

 <TextField
    inputProps={{ min: 5, max: 11, type: "number" }}
    onChange={e => setName(e.target.value)}
    required
  />