react input pin code

ตอบโต้รหัสพินอินพุต

ส่วนประกอบอินพุต PIN ที่เข้าถึงได้และง่ายสร้างขึ้นด้วยองค์ประกอบสไตล์สำหรับ ReactJS

การสาธิต

ที่นี่เพื่อดูเอกสารและตัวอย่าง

ซอร์สโค้ดที่ https://github.com/luffy84217/react-input-pin-code

การติดตั้ง

ในการเริ่มต้นใช้งานติดตั้งและบันทึกในการพึ่งพา package.json ของคุณ Run:

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 prop จำนวนฟิลด์อินพุตที่แสดงผลเท่ากับความยาวของอาร์เรย์

รหัสผ่านชื่อคลาสและชื่อ

คุณสามารถส่ง id หรือ name หรือ containerClassName ชื่อหรือ inputClassName prop.className และชื่อและชื่อจะถูกแชร์ระหว่างอินพุตซึ่งหมายความว่าพวกเขาแต่ละคนจะตั้งชื่อเป็นค่านี้มันสะดวกสบายสำหรับการใช้องค์ประกอบ pseudo ในไฟล์ global.css ID จะผนวกดัชนีเข้ากับสตริงใด ๆ ที่คุณให้และส่งผ่านไปยังอินพุตที่เกี่ยวข้อง ตัวอย่างเช่นหากคุณผ่าน Foo เป็น ID และ BAR เป็นชื่อและมีสี่อินพุต ID ที่ได้คือ FOO-0 , FOO-1 , FOO-2 และ FOO-3 และแต่ละอินพุตมีแถบชื่อ

ขนาดของอินพุต

คุณสามารถควบคุมขนาดของอินพุตด้วย 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 เสาเพื่อระบุ pattern แอตทริบิวต์ดั้งเดิมซึ่งเป็นนิพจน์ทั่วไปซึ่งค่าของอินพุตจะต้องตรงกันเพื่อให้ค่าผ่านการตรวจสอบข้อ จำกัด

Format เสาระบุฟังก์ชั่นบริสุทธิ์เพื่อแปลงอินพุตดิบ ตัวอย่างเช่นในการตั้งค่าเป็นตัวพิมพ์ใหญ่:

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

สถานะที่ถูกต้องและไม่ถูกต้อง

คุณสามารถผ่าน validate เสาเพื่อตรวจสอบค่าอินพุตหากค่าของอินพุตไม่ตรงกับการทดสอบมันจะแสดงข้อผิดพลาดเส้นขอบป้อนทันทีในขณะที่จะแสดงเส้นขอบที่ถูกต้องหลังจากการป้อนข้อมูลทั้งหมดจะถูกกรอกและผ่านการตรวจสอบความถูกต้อง

คุณสามารถปิดการใช้งานพฤติกรรมนี้ได้โดยการตั้ง showState prop prop เป็น เท็จ

การเพิ่มหน้ากาก

คุณสามารถตั้งค่าเสา mask เป็น จริง เพื่อป้องกันไม่ให้แสดงค่าอินพุต มันเทียบเท่ากับการตั้งค่า type แอตทริบิวต์ Native อินพุตเป็น รหัสผ่าน

ปิดใช้งานการจัดการโฟกัส

โดยค่าเริ่มต้น PinInput จะย้ายโฟกัสไปยังอินพุตถัดไปโดยอัตโนมัติเมื่อฟิลด์เต็ม นอกจากนี้ยังถ่ายโอนโฟกัสไปยังอินพุตก่อนหน้าเมื่อกด Backspace โดยเน้นไปที่อินพุตที่ว่างเปล่า

หากต้องการปิดการใช้งานพฤติกรรมนี้ให้ตั้งค่า prop autoTab เป็น false

ออโต้โฟกัส

PinInput เสนอวิธีให้โฟกัสตั้งแต่เริ่มต้น เพียงตั้งค่าเสาโฟกัส autoFocus ให้เป็น จริง เพื่อโฟกัสอินพุตแรกเมื่อการติดตั้งเริ่มต้นของส่วนประกอบ

เมื่ออินพุตทั้งหมดกรอกข้อมูล

PinInput จัดเตรียมตัวจัดการเหตุการณ์ onComplete เพื่อเข้าถึงค่าอินพุตซึ่งแตกต่างจาก onChange , onComplete เฉพาะทริกเกอร์เมื่ออินพุตทั้งหมดกรอกข้อมูล

ขอให้สังเกตว่า หากคุณเสนอรายการของอักขระที่อนุญาตเพื่อ validate ของเสา onComplete จะทริกเกอร์ ony เมื่อค่าอินพุตทั้งหมดผ่านการตรวจสอบความถูกต้อง

การเปลี่ยนตัวยึดตำแหน่ง

โดยค่าเริ่มต้น PinInput Placeholder คือ (○) คุณสามารถเปลี่ยนแปลงได้หากคุณต้องการ

อัตโนมัติและคัดลอก + วาง

ลองคัดลอกและวาง 1234 ลงในอินพุตใด ๆ

โดยค่าเริ่มต้นคุณสามารถเปลี่ยนอินพุตได้ทีละครั้งเท่านั้น แต่ถ้าหนึ่งในฟิลด์อินพุตได้รับสตริงที่ยาวขึ้นโดยการวางลงในนั้น PinInput จะพยายามตรวจสอบสตริงและเติมอินพุตอื่น ๆ

อินพุต PIN (ไม่สามารถควบคุมได้)

นอกจากนี้ยังมีรุ่นที่ไม่สามารถควบคุมได้คือ 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 Props

ชื่อ (*จำเป็น)	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
อาเรียอธิบายโดย	สาย		ตั้งค่าแอตทริบิวต์ Aria Describedby
อาเรีย-เบล	สาย	"โปรดป้อนรหัสพิน"	ตั้งค่าแอตทริบิวต์ Aria-Label
Aria-Labelledby	สาย		ตั้งค่าแอตทริบิวต์ Aria-Labelledby
การกรองอัตโนมัติ	สาย	"ปิด"	กำหนดว่าเบราว์เซอร์ควรให้คำแนะนำมูลค่าหรือไม่
ออโต้โฟกัส	บูลีน	เท็จ	ถ้าเป็นจริงอินพุตจะเน้นไปที่การเมาท์แรก
Autotab	บูลีน	จริง	หากโฟกัสที่แท้จริงจะย้ายโดยอัตโนมัติไปยังอินพุตถัดไป/ก่อนหน้าเมื่อกรอกหรือลบ
ชายแดน	สาย	RGB (204,204,204)	ให้คุณปรับแต่งสีเส้นขอบเมื่ออินพุตไม่ได้โฟกัส
ErrorBorderColor	สาย	RGB (220,53,69)	ให้คุณปรับแต่งสีเส้นขอบเมื่ออินพุตไม่ถูกต้อง
FocusBorderColor	สาย	RGB (13,110,253)	ให้คุณปรับแต่งสีเส้นขอบเมื่ออินพุตถูกโฟกัส
ValidBorderColor	สาย	RGB (25,135,84)	ให้คุณปรับแต่งสีเส้นขอบเมื่ออินพุตถูกต้อง
พิการ	บูลีน		แสดงผลส่วนประกอบในสถานะปิดใช้งาน
รูปแบบ	(Char: String) => String		ฟังก์ชั่นบริสุทธิ์เพื่อแปลงอินพุตดิบ
รหัสประจำตัว	สาย		ค่าแอตทริบิวต์ ID ที่จะเพิ่มลงในองค์ประกอบอินพุตและเป็นฉลากสำหรับค่าแอตทริบิวต์
อินพุต	สาย		แอตทริบิวต์นี้อนุญาตให้เบราว์เซอร์แสดงแป้นพิมพ์เสมือนที่เหมาะสม ( หมายเหตุ type Prop จะกำหนด inputMode ที่เหมาะสมโดยอัตโนมัติหากคุณผ่าน POP inputMode มันจะแทนที่ inputMode ในตัวในตัว)
หน้ากาก	บูลีน	เท็จ	ป้องกันไม่ให้แสดงรหัสพิน
ชื่อ	สาย		แอตทริบิวต์ชื่อ
onblur	(เหตุการณ์: react.focusevent) => โมฆะ		เรียกว่าเหตุการณ์ onblur ทริกเกอร์
การเปลี่ยน	(ค่า: สตริง | สตริง [], ดัชนี: หมายเลข, ค่า: สตริง []) => โมฆะ		เรียกว่าเมื่อมีการเปลี่ยนแปลงค่าอินพุต
มีความหลากหลาย	(ค่า: สตริง []) => โมฆะ		เรียกว่าเมื่ออินพุตทั้งหมดกรอกและตรวจสอบความถูกต้อง
onfocus	(เหตุการณ์: react.focusevent) => โมฆะ		เรียกว่าเหตุการณ์ onfocus ทริกเกอร์
onkeydown	(เหตุการณ์: react.keyboardEvent) => โมฆะ		เรียกว่าเหตุการณ์ onkeydown ทริกเกอร์
ผู้ถือครองตำแหน่ง	สาย	"O"	แสดงเมื่อยังไม่ได้ป้อนรหัส PIN
ที่จำเป็น	บูลีน		แสดงองค์ประกอบในสถานะที่ต้องการ
โชว์สเตท	บูลีน	จริง	ตรวจสอบว่าชายแดนที่ถูกต้อง/ไม่ถูกต้องปรากฏขึ้นหรือไม่
ขนาด	"XS" | "SM" | "MD" | "LG"	"MD"	แสดงส่วนประกอบในขนาดที่ให้ไว้
มีชื่อ	สาย		ให้คุณต่อท้ายคลาสที่กำหนดเองเข้ากับองค์ประกอบคอนเทนเนอร์
ภาชนะบรรจุ	วัตถุ	-	ให้คุณปรับแต่งองค์ประกอบคอนเทนเนอร์
inputclassname	สาย		ให้คุณต่อท้ายคลาสที่กำหนดเองเข้ากับองค์ประกอบอินพุต
อินพุต	วัตถุ	-	ให้คุณปรับแต่งองค์ประกอบอินพุต
พิมพ์	"หมายเลข" | "ข้อความ"	"ตัวเลข"	ประเภทของค่าที่พินอินพุตควรอนุญาต
ตรวจสอบความถูกต้อง	สตริง | สตริง [] | regexp		นิพจน์ทั่วไปซึ่งค่าของอินพุตจะต้องตรงกันเพื่อให้ค่าผ่านการตรวจสอบข้อ จำกัด
ค่า (*)	สตริง []		แอตทริบิวต์ค่า pininput

อุปกรณ์ StatefulPinInput

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ความยาว	ตัวเลข	4	จำนวนฟิลด์อินพุต
ค่าเริ่มต้น	สตริง | สตริง []	-	ค่าเริ่มต้นของอินพุต PIN

ใบอนุญาต

มิกซ์