良许Linux教程网 干货合集 简单介绍可定制react18 input otp 一次性密码输入组件

简单介绍可定制react18 input otp 一次性密码输入组件

这篇文章主要为大家介绍了可定制react18 input otp 一次性密码输入组件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

简单介绍可定制react18 input otp 一次性密码输入组件简单介绍可定制react18 input otp 一次性密码输入组件
一个完全可定制的、用于React驱动的应用程序的一次性密码(OTP)、电话号码和pin码输入组件。

主要特点

它在React和ionic应用程序上都很好用。在手机上也能正常工作。

你可以用inputNum道具只指定数字输入。

在网页和手机上与剪贴板粘贴功能完美配合。

npm上唯一支持’enter’键提交的OTP输入包。

在Android上没有OTP粘贴问题。

在iOS chrome上轻松粘贴,从短信中读取功能。

支持onSubmit可选道具。你甚至不需要一个按钮来提交。

你也可以用这个包来输入电话号码。

你也可以用这个包在密码字段上使用inputSecure道具。

你可以为React18-input-otp提供自定义css以及输入道具。

基本用法

1.安装和导入

# 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组件添加到应用程序中

export default class App extends Component {
  state = { otp: '' };
  handleChange = (otp) => this.setState({ otp });
  render() {
    return -} />;
  }
}
// OR
export default function ReactOtpInput() {
  const [otp, setOtp] = useState('');
  const handleChange = (enteredOtp) => {
    setOtp(enteredOtp);
  };
  return -} />;
}

3.所有默认的道具

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

预览

简单介绍可定制react18 input otp 一次性密码输入组件简单介绍可定制react18 input otp 一次性密码输入组件

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

以上就是可定制react18 input otp 一次性密码输入组件的详细内容

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部