react input pin code下载 - react input pin code源代码下载

react input pin code

三方组件

v1.2.1

下载

反应输入引脚代码

可访问且简单的引脚输入组件，该组件构建了用于ReactJS的样式组件。

演示

在这里查看文档和示例。

源代码https://github.com/luffy84217/reaeact-input-pin-code。

安装

要开始，请安装并保存在您的package.json中。JSON依赖项，运行：

npm install react-input-pin-code styled-components

或者

yarn add react-input-pin-code styled-components

请注意，样式组件是同行依赖性。

输入

您可以使用以下两种导入模块的方法。

 import { PinInput } from 'react-input-pin-code' // ES Module
or
var PinInput = require ( 'react-input-pin-code' ) . PinInput // CommonJS Module

用法

基本示例

 import React from 'react' ;
import { PinInput } from 'react-input-pin-code' ;

export default ( ) => {
  const [ values , setValues ] = React . useState ( [ '' , '' , '' ] ) ;

  return (
    < PinInput
      values = { values }
      onChange = { ( value , index , values ) => setValues ( values ) }
    />
  ) ;
} ;

每次输入一次填充一个字符。输入字符后，焦点将在序列中自动转移到下一个输入，直到填充所有输入为止。以下是行为的解释：

您每个输入只能填写一个字符。
要覆盖输入的值，您不需要在输入中选择文本。如果您在集中输入时键入数字，则输入将更新。
在输入Backspace的后盖时，将其焦点移至上一个输入（如果有）并清除值。

引脚输入长度

PinInput期望值values有一系列字符串。呈现的输入字段的数量等于数组的长度。

通过ID，className和名称

您可以通过id或name或containerClassName或inputClassName Prop.ClassName和名称在输入之间共享，这意味着它们每个人都会将其名称设置为此值，对于在global.css文件中使用pseudo elements是舒适的。 ID会将索引附加到您提供的任何字符串中，并将其传递给相应的输入。例如，如果将foo作为id和bar作为名称传递，并且有四个输入，则结果ID为foo-0 ， foo-1 ， foo-2和foo-3 ，并且每个输入都有名称bar。

输入的大小

您可以用size道具控制输入的大小。它有四个尺寸。

种类	尺寸	字体大小
XS	1.5REM（24px）	0.75REM（12px）
SM	2REM（32px）	0.875REM（14px）
MD	2.5REM（40px）	1REM（16px）
LG	3REM（48px）	1.125REM（18PX）

允许字母数字输入值

默认情况下， PinInput被传递给type Prop，因此它仅接受数字值以显示。要增加对字母数值的支持，请传递type Prop并将其值设置为文本或数字。

验证和格式

PinInput提供了validate Prop来指定本机属性pattern ，这是一个正则表达式，输入值必须匹配，以使值通过约束验证。

Format prop指定纯函数以转换原始输入。例如，将值设置为上限：

(char: string) => char.toUpperCase()

有效和无效状态

您可以通过验证Prop validate输入值，如果输入值不匹配测试，则将显示错误边框即可输入，而仅在填写所有输入并通过验证后，它才会显示有效的边框。

您可以通过将showState Prop设置为False来禁用此行为。

添加口罩

您可以将mask Prop设置为True ，以防止显示输入值。它等效于将输入本机属性type设置为密码。

禁用焦点管理

默认情况下， PinInput移动一旦填充字段，将自动移动到下一个输入。当将Backspace按下空对空输入时，它还将重点转移到先前的输入中。

要禁用此行为，请将autoTab Prop设置为false

自动对焦

PinInput提供了一种从一开始就可以集中精力的方式。只需将autoFocus Prop设置为True即可将第一个输入集中在组件的初始安装后。

一旦填写所有输入

PinInput提供了onComplete事件处理程序来访问输入值，与onChange不同，仅在填充所有输入时onComplete触发器。

请注意，如果您提供允许validate的字符列表，则当所有输入值通过验证时， onComplete将触发。

改变占位符

默认情况下， PinInput占位符为（○），如果需要，可以更改它。

自动填充和复制 +糊剂

尝试将1234复制并粘贴到任何输入中。

默认情况下，您只能一次更改一个输入，但是如果其中一个输入字段通过将其粘贴到较长的字符串中， PinInput尝试验证字符串并填充其他输入。

状态（不受控制的）引脚输入

还有一个不受控制的版本，即StatefulPinInput ，它可以管理其自己的状态。该组件的默认输入长度为四个，但是您可以通过将数字传递到length支柱来更改。 ASLO您可以将initialValue作为StatefulPinInput的初始值传递。

 import React from 'react' ;
import { StatefulPinInput } from 'react-input-pin-code' ;

export default ( ) => {
  return (
    < StatefulPinInput
      length = { 4 }
      initialValue = "1234"
    />
  ) ;
} ;

API

PinInput道具

名称（*必需）	类型	默认	描述
ARIA描述	细绳		设置ARIA描述的属性。
咏叹调标签	细绳	“请输入PIN代码”	设置ARIA-LABEL属性。
Aria-labelledby	细绳		设置Aria-labelled属性。
自动完成	细绳	“离开”	确定浏览器是否应提供价值建议。
自动对焦	布尔	错误的	如果为true，则输入将集中在第一个安装座上。
Autotab	布尔	真的	如果真正的焦点将自动移动到填充或删除后的下一个/上一个输入
边界色	细绳	RGB（204,204,204）	当输入不集中时，让您自定义边框颜色。
errorbordercolor	细绳	RGB（220,53,69）	当输入无效时，让您自定义边框颜色。
FocusBorderColor	细绳	RGB（13,110,253）	当关注输入时，让您自定义边框颜色。
有效bordercolor	细绳	RGB（25,135,84）	当输入有效时，让您自定义边框颜色。
禁用	布尔		在残疾状态下渲染组件。
格式	（char：string）=>字符串		纯函数以转换原始输入。
ID	细绳		ID属性值要添加到输入元素，作为属性值的标签。
输入模式	细绳		此属性允许浏览器显示适当的虚拟键盘。（ Note `type` Prop将自动确定适当的`inputMode` 。如果您通过`inputMode` Prop，它将覆盖内置的`inputMode` 。）
面具	布尔	错误的	防止显示PIN代码
姓名	细绳		名称属性。
Onblur	（事件：react.focusevent）=> void		称为Onblur事件触发。
Onchange	（值：字符串\|字符串[]，索引：数字，值：string []）=> void		更改输入值时调用。
oncomplete	（值：string []）=> void		当填写所有输入并验证时，请调用
焦点	（事件：react.focusevent）=> void		称为onfocus事件触发器。
onkeydown	（事件：react.KeyboardEvent）=> void		称为onkeydown事件触发。
占位符	细绳	“ O”	显示尚未输入引脚代码时显示。
必需的	布尔		在所需状态下渲染组件。
展示	布尔	真的	确定是否显示有效/无效边框。
尺寸	“ XS” \| “ SM” \| “ MD” \| “ LG”	“ MD”	渲染分量提供的大小。
containerClassName	细绳		让您可以将自定义类附加到容器元素上。
集装箱	目的	{}	让您自定义容器元素。
InputClassName	细绳		让您可以将自定义类附加到输入元素。
输入风格	目的	{}	让您自定义输入元素。
类型	“数字” \| “文本”	“数字”	PIN输入应允许的值类型
证实	字符串\|字符串[] \| REGEXP		输入值必须匹配的正则表达式以使值通过约束验证。
值（*）	细绳[]		pininput值属性。