前言
在前端开发中，输入框是一个经常要用到的组件。而数字输入框又是一个非常常见的类型。本文将介绍一个可以方便地实现数字输入框的 npm 包 rc-input-number 的使用方法。
安装
你可以通过这个命令在你的项目中安装 rc-input-number：
npm install rc-input-number
使用
基本用法
组件基本用法与 HTML 中 input 标签的用法非常类似：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ------------------
----- ---- ------- --------- -
-------- -
------ -
------------ ------- -------- ---------------- --
--
-
-上面代码中，我们导入了组件，然后在组件中使用了它。min 属性表示可输入的最小值，max 属性表示可输入的最大值，defaultValue 属性表示初始值。
受控组件和非受控组件
rc-input-number 组件同时支持受控组件和非受控组件，下面给出它们的使用方法。
受控组件
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ------------------
----- ---- ------- --------- -
------------------ -
-------------
---------- - -
------ --
--
------------- - -------------------------
-
--------------- -
--------------- ----- ---
-
-------- -
------ -
------------ ------- -------- ------------------------ ------------------------ --
--
-
-上面代码中，我们把 value 属性的值绑定到组件内部状态的 value，在组件内部实现 onChange 函数，当输入框的值被修改时更改组件内部状态的 value。
非受控组件
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ------------------
----- ---- ------- --------- -
------------------ -
-------------
------------- - -------------------------
-
--------------- -
-------------------
-
-------- -
------ -
------------ ------- -------- ---------------- ------------------------ --
--
-
-上面代码中，我们只设置了 defaultValue 属性，组件的值不受外部状态的控制，当组件内部值改变时会触发 onChange 事件，外部可根据事件参数获取输入框的当前值。
API
rc-input-number 组件支持的属性和事件如下：
属性
| 属性名称 | 类型 | 默认值 | 是否必传 | 描述 |
|---|---|---|---|---|
| value | number | - | 否 | 受控组件使用的值 |
| defaultValue | number | - | 否 | 非受控组件使用的初始值 |
| min | number | - | 否 | 可输入的最小值 |
| max | number | - | 否 | 可输入的最大值 |
| step | number | 1 | 否 | 每次增加或减少的步长 |
| precision | number | - | 否 | 数字精度 |
| formatter | function(value: number | string) => string | - | 否 |
| parser | function(string: string) => number | - | 否 | 控制外部传入值的格式 |
| autoFocus | boolean | false | 否 | 是否自动获取焦点 |
| disabled | boolean | false | 否 | 是否禁用 |
| readOnly | boolean | false | 否 | 是否只读 |
| className | string | - | 否 | 自定义类名 |
| style | object | - | 否 | 自定义样式 |
| title | string | - | 否 | 输入框的提示文字 |
事件
| 事件名称 | 类型 | 描述 |
|---|---|---|
| onChange | function(value: number, event: object) | 输入框的值改变时触发的事件 |
| onPressEnter | function() | 用户按下回车键时触发的事件 |
| onFocus | function(event: object) | 输入框获取焦点时触发的事件 |
| onBlur | function(event: object) | 输入框失去焦点时触发的事件 |
结语
rc-input-number 是一个非常实用的 npm 包，在前端开发中非常应用广泛。从文章中你可以学到如何安装和使用这个包，以及它所支持的属性和事件。希望能够对你的前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162846