Taro+React验证码输入框

最新推荐文章于 2024-08-22 08:16:59 发布

qq_40942874

最新推荐文章于 2024-08-22 08:16:59 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/qq_40942874/article/details/122430850

本文介绍了一个使用React实现的输入框联动示例，用户在一个输入框中输入内容时，内容会自动同步到其他多个输入框中，并且原始输入框会被隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：首先我们需要一个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<any>([]);

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

    return (
      <View>
        <Input
          name='value'
          type='text'
          placeholder=''
          className='one-input'
          value={answerValue.join('')}
          onInput={(event)=>{
            let value = event.detail.value.split('')
            let a:any= [];
            for(let i=0;i<props?.fillResult?.length;i++){
              if(i<value.length){
                  a.push(value[i]);
              }else{
                a.push('')
              }
            }
            setAnswerValue(a)
          }}
        />
        {
          answerValue.map((item:any,index:any)=>
            <Input
              disabled
              className='content-input'
              name='value'
              type='text'
              placeholder=''
              value={answerValue[index]}
            />
          )
        }
        </View>
  )
}

添加样式

  .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;
  }