在前端开发中，输入框 label 的悬浮效果是一个常见的交互设计。而 react-floating-label 正好解决了这个问题。本文将为你介绍如何安装和使用该 npm 包。
安装
安装 react-floating-label 可以通过 npm 安装，使用以下命令：
npm install react-floating-label --save
使用
在你的 React 组件中引入该组件:
import FloatingLabelInput from 'react-floating-label';
然后在 render 方法中使用即可：
<FloatingLabelInput
id="my-input"
label="你的名字"
value={this.state.name}
onChange={(e) => this.setState({ name: e.target.value })}
/>其中，id 为输入框的唯一标识符，label 为输入框的标签名称，value 为输入框的值，onChange 为输入框数值变化时的回调函数。
自定义样式
你可以通过在组件上添加 CSS class 来自定义样式：
<FloatingLabelInput
id="my-input"
label="你的名字"
className="my-input"
inputClassName="my-input-inner"
value={this.state.name}
onChange={(e) => this.setState({ name: e.target.value })}
/>其中，className 和 inputClassName 分别为组件和输入框的 CSS class 名称。
设置 placeholder
你也可以设置输入框的 placeholder：
<FloatingLabelInput
id="my-input"
label="你的名字"
placeholder="请输入你的名字"
value={this.state.name}
onChange={(e) => this.setState({ name: e.target.value })}
/>结语
react-floating-label 为我们提供了一种简洁、有效的方案来解决输入框的标签悬浮效果，能够有效提升用户体验。希望本篇文章能够帮助你快速了解并使用该组件。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -----------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
----- ---
--
-
-------- -
------ -
-----
-------------------
-------------
------------
-----------------------
------------- -- --------------- ----- -------------- ---
--
-------------------
---------------
-------------
------------------------
------------- -- --------------- ------ -------------- ---
--------------------
-------------------------------
--
-------------------
---------------
------------
---------------------
------------------------
------------- -- --------------- ------ -------------- ---
--
------
--
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69891