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

291次阅读

共计 1228 个字符，预计需要花费 4 分钟才能阅读完成。

导读	这篇文章主要为大家介绍了可定制 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 一次性密码输入组件

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

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