在前端开发中，我们通常需要使用表单功能。表单中的一个常见控件就是文本框。而一个更为高端的文本框，应该是支持自动伸缩的输入框——用户可以在其中输入任意长度的文本，而输入框会随着文本内容变化而自动伸缩，以适应输入内容的长度。而 npm 包 material-ui-expandable-text-field 就提供了这样的自动伸缩功能。在本文中，我们将一起来学习如何使用这个 npm 包。
material-ui-expandable-text-field 简介
npm 包 material-ui-expandable-text-field 是一个基于 Material-UI 的自动伸缩文本输入框组件。这个组件的优点在于它使用起来非常简单，而且轻量级，只要安装了 Material-UI，就可以直接使用。
下面是这个组件的主要特点：
- 支持自动伸缩，根据文本框中的内容长度自动调整高度。
- 支持最小和最大高度设置，避免出现不必要的滚动条，同时也让文本框更为美观。
- 支持多行文本输入，也就是说它能够适用于表单中的长文本输入场景。
安装 material-ui-expandable-text-field
我们可以通过 npm 安装 material-ui-expandable-text-field，只需要在命令行中输入以下命令即可：
npm install --save material-ui-expandable-text-field
使用 material-ui-expandable-text-field
要使用 material-ui-expandable-text-field 组件，我们需要先引入它的库：
import ExpandableTextField from 'material-ui-expandable-text-field';
然后，在我们需要使用自动伸缩文本输入框的地方，就可以直接使用 ExpandableTextField 组件了。一般来说，我们需要在表单（Form）中使用这个组件，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- ---- ------------------------------------
----- ----------- ------- --------------- -
-------- -
------ -
------
-------------------- --
-------
--
-
-这样，我们就可以在 ExampleForm 表单中使用 ExpandableTextField 了，它会自动伸缩以适应输入内容的长度。
当然，我们可以通过设置 componet 属性来指定 ExpandableTextField 渲染成那种 HTML 标签，以适应我们的应用。例如，我们可以渲染成 <div> 标签：
<ExpandableTextField component="div" />
最小和最大高度设置
为了保证自动伸缩文本输入框的美观，我们通过设置最小和最大高度来避免出现不必要的滚动条，以及让文本框更为美观。而这个设置，在 material-ui-expandable-text-field 中也是非常简单的，只需要通过指定 rows 和 maxRow 属性的值即可：
<ExpandableTextField rows={3} maxRows={6} />上面的代码中，我们设置了行数为 3，最大行数为 6。这样，当用户输入的文本超过 3 行时，文本输入框会自动扩展高度。但是当输入的文本超过 6 行时，文本框的高度就不再伸展了，这样就可以保证文本框不至于过长，也不会出现意外的滚动条。
示例代码
最后，我们来看一个完整的例子，假设我们需要在一个表单中输入一些长文本，以及一些其他的表单项。那么，我们可以编写以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- ---- ------------------------------------
------ --------- ---- ------------------------------
------ ------ ---- ---------------------------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
------------ ---
------ ---
--
-
------------ - ------- -- -
---------------
-------------------- -------------------
---
--
------------ - ------- -- -
-----------------------
------------------------
--
-------- -
------ -
----- -----------------------------
----------
------------
-------------
------------------------
----------------------------
---------------
--
--- --
--------------------
------------------
-------------------
------------------------------
----------------------------
--------
-----------
--
--- --
------- ------------------- --------------- --------------
------
---------
-------
--
-
-在这个示例中，我们定义了一个 ExampleForm 类，其中包含了一个文本输入框和一个自动伸缩的输入框。使用者可以在输入框中输入题目和描述，并点击 Submit 按钮提交表单。通过 handleSubmit() 函数，我们可以在浏览器控制台中看到表单提交的内容。
当然，上面的代码中，我们还使用了 Material-UI 的 TextField 和 Button 组件，它们可以用于创建漂亮的输入框和按钮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559cd81e8991b448d752c