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

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

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

正文

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

主要特點(diǎn)

它在React和ionic應(yīng)用程序上都很好用。在手機(jī)上也能正常工作。
你可以用inputNum道具只指定數(shù)字輸入。
在網(wǎng)頁(yè)和手機(jī)上與剪貼板粘貼功能完美配合。
npm上唯一支持'enter'鍵提交的OTP輸入包。
在Android上沒(méi)有OTP粘貼問(wèn)題。
在iOS chrome上輕松粘貼，從短信中讀取功能。
支持onSubmit可選道具。你甚至不需要一個(gè)按鈕來(lái)提交。
你也可以用這個(gè)包來(lái)輸入電話號(hào)碼。
你也可以用這個(gè)包在密碼字段上使用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.所有默認(rèn)的道具

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 一次性密碼輸入組件的詳細(xì)內(nèi)容，更多關(guān)于react18 input otp 一次性密碼輸入的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

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