如何在Material-UI的TextField组件中限制字符串输入长度？

嘿，这个问题我之前也踩过坑！其实Material-UI的TextField是基于原生input标签封装的组件，要实现和<input type="text" maxlength="3" />完全一样的输入长度限制效果，关键是把原生的maxLength属性传递到底层的input元素上，这里有两种简单靠谱的方式：

方式一：使用inputProps传递属性（官方推荐） #

这是最直接也最符合Material-UI设计思路的方法，你只需要在TextField组件里添加inputProps这个属性，把maxLength配置放在里面就行：

<TextField
  id="name"
  label="Name"
  type="text"
  inputProps={{ maxLength: 3 }} // 核心配置就在这里
  margin="normal"
/>

这样底层的原生input就会自动带上maxlength="3"属性，用户输入到3个字符后就无法继续输入，和原生input的限制效果完全一致。

方式二：通过Input组件自定义（适合复杂场景） #

如果你需要对输入框做更多个性化定制，可以直接用Material-UI的Input组件配合TextField的input属性来实现：

import Input from '@mui/material/Input'; // 记得先导入Input组件

<TextField
  id="name"
  label="Name"
  margin="normal"
  input={<Input maxLength={3} />}
/>

这种方式同样能达到长度限制的效果，不过一般来说第一种方法就足够满足需求啦。

顺便提一句，你之前尝试直接在TextField上写maxLength="3"或者max="3"没用，是因为TextField本身的props里并没有这些属性，必须把它们传递给内部的原生input元素才会生效哦～

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