介绍
@atlaskit/field-text 是一个基于 React 的 UI 库，它提供了一套可重用的文本输入表单组件，包括文本框、标签、密码框等等。它使用了样式库 @atlaskit/css-reset，所以样式非常简洁干净，而且也支持使用自定义的样式。
安装
安装 @atlaskit/field-text 可以使用 npm 或 yarn，分别运行如下命令：
# 使用 npm npm install @atlaskit/field-text --save # 使用 yarn yarn add @atlaskit/field-text
使用
使用 @atlaskit/field-text 的方式非常简单，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -----------------------
-------- ----- -
------ -
-----
----------
-----------
----------
--------------------
------------- -- ----------------------------
--
------
--
-代码中我们引入了 @atlaskit/field-text 包，然后在组件中使用了 FieldText 组件来实现一个输入框，其中我们指定了若干属性：
label：组件的标签，显示在输入框上方。isRequired：指定输入框是否为必填项。placeholder：输入框的占位提示文本。onChange：输入框内容变化时的回调函数。
在上述代码中，我们使用一个 div 元素来包裹 FieldText 组件，但实际上你可以根据需要把它放在任何地方，比如页面中的表单中。
可选属性
FieldText 组件提供了以下可选属性：
appearance：组件外观，可选的值有 standard、subtle、none（默认为 standard）。isDisabled：是否禁用组件（默认为 false）。isRequired：是否必填项（默认为 false）。isReadOnly：是否只读（默认为 false）。isMonospaced：是否开启等宽文本字体（默认为 false）。isInvalid：是否无效（默认为 false）。isLabelHidden：是否隐藏标签（默认为 false）。isValidationHidden：是否隐藏验证信息（默认为 false）。label：组件标签。align：标签和输入框对齐方式，可选的值有 top、center、bottom（默认为 top）。maxLength：输入框的最大长度。minLength：输入框的最小长度。name：输入框的名称。placeholder：输入框的占位符。type：输入框的类型，可选的值有 textarea、password、tel、email、search、number、url、date、time、datetime-local、week、month、file（默认为 text）。value：输入框的值。defaultValue：输入框的默认值。onBlur：失去焦点时的回调函数。onChange：输入框内容变化时的回调函数。onFocus：获取焦点时的回调函数。onKeyDown：按下键盘中的任意键时的回调函数。
自定义样式
@atlaskit/field-text 支持使用自定义的样式，你可以使用 CSS 来覆盖组件的默认样式，比如修改输入框的边框颜色、字体大小等等。
下面是一个例子：
-- -------------------- ---- -------
------- ----------------------
------- -----------------------------------------------
---------------- -
---------------------- -
------ ----
-
---------------------------- -
------ ------
-
-------------------- -
------------- -----
---------- -----
-
-在上述代码中，我们首先引入了 @atlaskit/css-reset 样式库和 @atlaskit/field-text 的样式文件，然后声明了一个名为 my-custom-style 的样式类，使用了不同的选择器来覆盖了标签、说明和输入框的默认样式。
最后，在组件中使用自定义样式：
<FieldText label="姓名" placeholder="请输入姓名" className="my-custom-style" ... />
我们把 className 属性指定为 my-custom-style，这样就可以应用上述自定义样式了。
总结
本文介绍了 npm 包 @atlaskit/field-text 的使用方法，包括安装、基本使用、可选属性和自定义样式等方面，希望读者可以通过本文学会如何使用该组件，并在项目中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7048daa9b7065299ccbaca