如何为TextareaAutosize设置最大输入长度？inputProps配置maxLength不生效如何解决？

失效原因 #

inputProps是TextField这类封装组件用来向内部原生输入框传递属性的专属参数，TextareaAutosize本身直接渲染原生textarea元素，所有未被组件显式定义的属性会直接透传给底层textarea，不需要套在inputProps里，所以你之前的写法无法把maxLength传递到真实的输入节点上。

解决方案 #

方案1：直接透传maxLength属性（推荐） #

直接把maxLength={60}作为组件属性传入即可，修改后的代码如下：

<TextareaAutosize 
  classes={classes.textarea} 
  ref={textAreaRef} 
  aria-label="empty textarea" 
  rowsMin={5} 
  maxLength={60}
  placeholder="60 Character Limit" 
/>

方案2：手动截断兜底 #

如果你使用的是特殊旧版本组件不支持属性透传，可以通过输入事件监听手动做长度截断：

// 输入事件处理逻辑
const handleTextareaInput = (e) => {
  if (e.target.value.length > 60) {
    e.target.value = e.target.value.slice(0, 60)
  }
}

// 组件调用代码
<TextareaAutosize 
  classes={classes.textarea} 
  ref={textAreaRef} 
  aria-label="empty textarea" 
  rowsMin={5} 
  onInput={handleTextareaInput}
  placeholder="60 Character Limit" 
/>

补充注意事项 #

• 如果你的TextareaAutosize是受控使用（绑定了value属性和onChange事件），需要在onChange的状态更新逻辑里额外增加长度校验，避免状态值超出限制导致原生maxLength失效。
• 配置完成后可以打开浏览器调试工具，查看渲染出来的原生textarea元素，确认标签上存在maxlength="60"属性即代表配置生效。

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