Taro+React验证码输入框

思路：首先我们需要一个input输入框来获取输入的内容，在通过多个input输入框来显示所输入的内容，然后隐藏获取输入内容的输入框。

import {View, Input} from '@tarojs/components'
import { useState,useEffect } from 'react';
import './index.less';

export default function Index(props) {
  const [answerValue,setAnswerValue] = useState([]);

  // 初始化
  useEffect(() => {
    let a:any= [];
    for(let i=0;i<6;i++){
      a.push('');
    }
    setAnswerValue(a);
  }, [])

    return (
      
        {
            let value = event.detail.value.split('')
            let a:any= [];
            for(let i=0;i
        {
          answerValue.map((item:any,index:any)=>
            
          )
        }
        
  )
}

添加样式

  .one-input {
    position: absolute;
    opacity: 0;
    color: #538eec00;
    font-size: 45px;
    z-index: 999;
  }


  .content-input {
    width: 35px;
    height: 46px;
    background: #cccccc;
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    color: #538eec;
  }