可定制react18 input otp 一次性密碼輸入組件

更新時間：2022年10月25日 16:44:31 作者：Jovie

這篇文章主要為大家介紹了可定制react18 input otp 一次性密碼輸入組件，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

一個完全可定制的、用于React驅(qū)動的應(yīng)用程序的一次性密碼（OTP）、電話號碼和pin碼輸入組件。

主要特點

它在React和ionic應(yīng)用程序上都很好用。在手機上也能正常工作。
你可以用inputNum道具只指定數(shù)字輸入。
在網(wǎng)頁和手機上與剪貼板粘貼功能完美配合。
npm上唯一支持'enter'鍵提交的OTP輸入包。
在Android上沒有OTP粘貼問題。
在iOS chrome上輕松粘貼，從短信中讀取功能。
支持onSubmit可選道具。你甚至不需要一個按鈕來提交。
你也可以用這個包來輸入電話號碼。
你也可以用這個包在密碼字段上使用inputSecure道具。
你可以為React18-input-otp提供自定義css以及輸入道具。

基本用法

1.安裝和導(dǎo)入

# Yarn
$ yarn add react18-input-otp
# NPM
$ npm i react18-input-otp

import React, { Component } from 'react';
import OtpInput from 'react18-input-otp';

// OR
import React, { useState } from 'react';
import OtpInput from 'react18-input-otp';

2.將OtpInput組件添加到應(yīng)用程序中

export default class App extends Component {
  state = { otp: '' };
  handleChange = (otp) => this.setState({ otp });
  render() {
    return <OtpInput value={this.state.otp} onChange={this.handleChange} numInputs={6} separator={<span>-</span>} />;
  }
}

// OR
export default function ReactOtpInput() {
  const [otp, setOtp] = useState('');
  const handleChange = (enteredOtp) => {
    setOtp(enteredOtp);
  };
  return <OtpInput value={otp} onChange={handleChange} numInputs={6} separator={<span>-</span>} />;
}

3.所有默認的道具

numInputs: 4,
onChange: (otp) => console.log(otp),
isDisabled: false,
shouldAutoFocus: false,
value: '',
isInputSecure: false,
onSubmit: (otp) => console.log(otp),

預(yù)覽

The postCustomizable One-time Password Input Component - react18-input-otpappeared first onReactScript.

以上就是可定制react18 input otp 一次性密碼輸入組件的詳細內(nèi)容，更多關(guān)于react18 input otp 一次性密碼輸入的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

詳解操作虛擬dom模擬react視圖渲染
這篇文章主要介紹了詳解操作虛擬dom模擬react視圖渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
React經(jīng)典面試題之倒計時組件詳解
這些天也都在面試,面試的內(nèi)容也大多千篇一律,無外乎vue、react這些框架的一些原理,和使用方法,但是也遇到些有趣的題目,這篇文章主要給大家介紹了關(guān)于React經(jīng)典面試題之倒計時組件的相關(guān)資料,需要的朋友可以參考下
2022-03-03
React中mobx和redux的區(qū)別及說明
這篇文章主要介紹了React中mobx和redux的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
React中的setState使用細節(jié)和原理解析(最新推薦)
這篇文章主要介紹了React中的setState使用細節(jié)和原理解析(最新推薦),前面我們有使用過setState的基本使用, 接下來我們對setState使用進行詳細的介紹，需要的朋友可以參考下
2022-12-12
React通過redux-persist持久化數(shù)據(jù)存儲的方法示例
這篇文章主要介紹了React通過redux-persist持久化數(shù)據(jù)存儲的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
React Native AsyncStorage本地存儲工具類
這篇文章主要為大家分享了React Native AsyncStorage本地存儲工具類，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
使用VScode 插件debugger for chrome 調(diào)試react源碼的方法
這篇文章主要介紹了使用VScode 插件debugger for chrome 調(diào)試react源碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解
這篇文章主要為大家介紹了React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
React+Mobx基本使用、模塊化操作
React 和 MobX 是一對強力組合，React 通過提供機制把應(yīng)用狀態(tài)轉(zhuǎn)換為可渲染組件樹并對其進行渲染，而MobX提供機制來存儲和更新應(yīng)用狀態(tài)供 React 使用，這篇文章主要介紹了React+Mobx基本使用、模塊化,需要的朋友可以參考下
2022-09-09
React、Vue中key的作用詳解 (key的內(nèi)部原理解析)
key是虛擬DOM對象的標識,當狀態(tài)中的數(shù)據(jù)發(fā)生變化時,Vue會根據(jù)[新數(shù)據(jù)]生成[新的虛擬DOM],本文給大家介紹React、Vue中key的作用詳解 (key的內(nèi)部原理解析),感興趣的朋友一起看看吧
2023-10-10