PinCode component
npm install @uiw/react-pin-codePinCode 安全码
===
针对输入数字序列进行了优化。最常见的应用是输入一次性安全码。它经过优化，可快速输入数字。
``jsx`
import { PinCode } from 'uiw';
// or
import PinCode from '@uiw/react-pin-code';
`jsx mdx:preview&bg=#fff
import React from 'react';
import { PinCode } from 'uiw';
export default function Demo() {
return (
$3
表单中应用 组件`jsx mdx:preview&bg=#fff
import React from 'react';
import { Form, Row, Col, Icon, PinCode, Button, Notify } from 'uiw';export default function Demo() {
return (
onSubmitError={(error) => {
if (error.filed) {
return { ...error.filed };
}
return null;
}}
onSubmit={({initial, current}) => {
const errorObj = {};
if (current.pinCode.join('').length === 0) {
errorObj.pinCode = '请输入安全码！';
}
if (current.pinCode.join('').length < 5) {
errorObj.pinCode = '安全码没有输入完整！';
}
if(Object.keys(errorObj).length > 0) {
const err = new Error();
err.filed = errorObj;
Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });
throw err;
}
Notify.success({
title: '提交成功！',
description: 表单提交成功，安全码为：${current.pinCode.join('')}！,
});
}}
fields={{
pinCode: {
initialValue: ['', '', '', '', ''],
children:
},
}}
>
{({ fields, state, canSubmit }) => {
console.log('state:',state.current.pinCode.join(''))
return (
|
{state.current.pinCode.join('')}
|
{JSON.stringify(state.current, null, 2)}
|
)
}}
)
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { PinCode, Divider } from 'uiw';export default function Demo() {
return (
console.log(val)} />
console.log(val)} />
console.log(val)} />
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { PinCode, Divider } from 'uiw';export default function Demo() {
return (
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { PinCode, Divider } from 'uiw';export default function Demo() {
return (
);
}
`PinCode
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| value | 绑定值，根据数组长度，展示安全码的长度 | string[] | - |
| disabled | 禁用输入框 | Boolean |
|
| autoFocus | 自动获得焦点。 | Boolean | - |
| placeholder | 占位符 | string | ○ |
| size | 指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 default 三种尺寸。 | String | - |
| onChange | value` 变化时回调函数 | Function(value: string[]) | - |