Package Exports
- pin-code-react
- pin-code-react/dist/index.umd.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pin-code-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
基于react的验证码、密码、数字输入框
1、支持粘贴到输入框
2、复制内容在剪贴板上支持一建填入
3、可自定义覆盖原有样式，.input-wrapper .input-item
安装
npm install pin-code-react --save使用
import React, { useState, useCallback, ChangeEvent } from 'react';
import PinCode from 'pin-code-react';
import 'pin-code-react/dist/index.css';
export default function Add () {
const [content, setContent] = useState('');
const [value, setValue] = useState('');
const getCode = useCallback((value: string) => {
setContent(value);
}, [])
const onChange = (e: ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
}
return (
<div>
<PinCode type="text" isImmediate onFinished={getCode} />
<input type="text" onChange={onChange} value={value} />
<div>{content}</div>
</div>
)
}参数
| 类型 | 描述 | 是否必传 | |
|---|---|---|---|
| length | number | 输入框的个数 | 否，默认6 |
| type | text | number | password | 输入框类型 | 否，默认text |
| isImmediate | boolean | 输入完成后是否立即触发回调函数 | 否，默认true |
| onFinished | （）=> void | Promise |
输入完成后触发回调函数，或者手动获取输入内容 | 是 |