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值屬性。