Material UI TextField 多行固定行数答案

【问题标题】：Material UI TextField multiline fixed quantity of rowsMaterial UI TextField 多行固定行数
【发布时间】：2022-01-09 14:56:15
【问题描述】：

如何将最大固定行数定义为 TextField 多行，将 maxRows 设置为 5 不起作用，最后得到无限行，有没有办法将行数固定为 5？谢谢

<TextField multiline maxRows={5}/>

以上不工作。

【问题讨论】：

【解决方案1】：

它确实按照预期的方式正常工作。道具maxRows 和minRows 控制显示多少可见行。因此，如果您想让固定数量的 5 行始终可见（即 5 行，即使 TextField 为空仍显示 5 行），您需要同时设置 maxRows 和 minRows。

但是，这仍然允许用户输入无限长的文本，一次只能看到 5 行。要控制文本的长度，估计有多少个字符（带空格）将构成大约 5 行，并在 inputProps 上设置 maxLength 属性。像这样：

<TextField
  maxRows={5}
  minRows={5}
  inputProps={{ maxLength: 50 }}
  multiline
  //  sx={{ maxWidth: 200 }}
/>

【讨论】：

最大长度很好，但是阻止扩展文本区域和内容的固定行很重要。谢谢。
你试过我上面的例子了吗？ maxRows 和 maxLength 的组合将阻止它扩展到超过 5 行。您可以通过在组件上设置maxWidth 来进一步控制TextField，以确保每行的大小是固定的：sx={{ maxWidth: 200 }}
一行一个字母怎么样，等于50行吗？
我不确定你的意思。一行中的字母数量取决于 TextField 的宽度和其中使用的 fontSize。在任何情况下，maxLength 将始终只是一个近似于 5（或 x）行的估计值......