PinCode 安全码

针对输入数字序列进行了优化。最常见的应用是输入一次性安全码。它经过优化，可快速输入数字。

import { PinCode } from 'uiw';
// or
import PinCode from '@uiw/react-pin-code';

基础用法

import React from 'react';
import { PinCode } from 'uiw';

export default function Demo() {
  return (
    <div>
       console.log(val)} /&gt;
    </div>
  );
}

在表单中使用

在 <form> 表单中应用 `` 组件

import React from 'react';
import { Form, Row, Col, Icon, PinCode, Button, Notify } from 'uiw';

export default function Demo() {
  return (
    <div>
       {
          if (error.filed) {
            return { ...error.filed };
          }
          return null;
        }}
        onSubmit={({initial, current}) =&gt; {
          const errorObj = {};
          if (current.pinCode.join('').length === 0) {
            errorObj.pinCode = '请输入安全码！';
          }
          if (current.pinCode.join('').length &lt; 5) {
            errorObj.pinCode = '安全码没有输入完整！';
          }
          if(Object.keys(errorObj).length &gt; 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: 
          },
        }}
      &gt;
        {({ fields, state, canSubmit }) =&gt; {
          console.log('state:',state.current.pinCode.join(''))
          return (
            <div>
              
                {fields.pinCode}
              
              
                
                  <button type="primary" disabled="{!canSubmit()}" size="small">提交</button>
                  <span style="{{">
                    {state.current.pinCode.join('')}
                  </span>
                
              
              
                
                  <pre style="{{">                    {JSON.stringify(state.current, null, 2)}
                  </pre>
                
              
            </div>
          )
        }}
      
    </div>
  )
}

更改占位符

import React from 'react';
import { PinCode, Divider } from 'uiw';

export default function Demo() {
  return (
    <div>
       console.log(val)} /&gt;
      
       console.log(val)} /&gt;
      
       console.log(val)} /&gt;
    </div>
  );
}

输入框被禁用

import React from 'react';
import { PinCode, Divider } from 'uiw';

export default function Demo() {
  return (
    <div>
      
      
      
      
      
    </div>
  );
}

尺寸大小

import React from 'react';
import { PinCode, Divider } from 'uiw';

export default function Demo() {
  return (
    <div>
      
      
      
      
      
    </div>
  );
}

PinCode