时间戳

首页 > 解决方案 > 逐步聚焦 TextInput 反应原生

javascript - 逐步聚焦 TextInput 反应原生

问题描述

我目前正在为反应原生应用程序创建一个 4 位 otp（一次性密码）视图，当我在前一个输入上键入数字时，我需要 TextInput 逐步聚焦。

我已经能够改变样式（没有焦点），但焦点不会随之改变，当我输入另一个数字时，应用程序崩溃。

我希望这样当我在第一个输入上输入时，焦点移动到下一个 TextInput 等等，在最后一个输入上，它专注于提交。

我该怎么做？

下面是我的代码

组件

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, ScrollView, View, Alert, Image } from 'react-native';
import { SimpleLinearGradientButton } from '../../components/Buttons';
import { SimpleCard } from '../../components/Cards';

export default function(props) {
  const [otp, setOtp] = useState([]);
  const [isFocused, setIsFocused] = useState({ focused: true, index: 0 });

  const inputs = Array(4).fill(0);

 function renderInputs() {
    return inputs.map((input, index) => {
      return (
        <TextInput
          style={
            isFocused.focused && index === isFocused.index
              ? styles.inputFieldsFocused
              : styles.inputFields
          }
          key={index}
          keyboardType={'numeric'}
          onChange={focus}
        ></TextInput>
      );
    });
  }

  function focus(e) {
    setOtp(otp.concat(this.value));
    setIsFocused({ focused: true, index: isFocused.index + 1 });
    isFocused.index ? e.focus() : null;
  }

  return (
    <ScrollView contentContainerStyle={styles.content}>
      <View>
        <Image
          style={styles.image}
          source={require('../../../assets/images/verification.png')}
        />
      </View>
      <View>
        <Text>Verification</Text>
        <Text>
          Enter the 4 digit sent to your email address
        </Text>
      </View>
      <View>
        <SimpleCard>
          <>{renderInputs()}</>
        </SimpleCard>
        <SimpleLinearGradientButton
              title="Submit"
            />
          </View>
        </ScrollView>
      );
    }

焦点功能旨在将下一个输入集中在该索引上，但这似乎不起作用，但样式会发生变化。我该怎么做？谢谢

标签： javascriptreactjsreact-nativeautofocus

解决方案

我建议使用单个hidden ，并根据输入的值TextInput在 simple -s 中呈现数字。View我认为没有理由对 4 位代码有不同的输入。

但是，如果您需要使用不同的输入，则必须以命令的方式（使用refs）控制它们的焦点状态。见focus()方法。这种方法也有一些错误（https://github.com/facebook/react-native/issues/19366）

请参阅此处的文档https://facebook.github.io/react-native/docs/textinput

推荐阅读