javascript - 逐步关注TextInput反应本机(Progressively focus TextInput react native)

Question

I am currently creating a 4 digit otp (one time password) view for a react native app and i need the TextInput to progressively focus when i type a number on the previous input.

(我目前正在为React Native应用程序创建一个4位数的otp（一次性密码）视图，当我在前一个输入中键入数字时，我需要TextInput逐步集中注意力。)

I have been able to make the style change (without focus) but the focus doesn't change with it and when i enter another digit the app crashes.

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

I want it such that when i type in on the first input, the focus move to the next TextInput and so on and on the last input, it focuses on submit.

(我希望这样，当我在第一个输入上键入内容时，焦点将移至下一个TextInput上，依此类推，在最后一个输入上，它将重点放在提交上。)

How do i go about this?

(我该怎么办？)

Below is my code

(下面是我的代码)

the component

(组件)

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

The focus function was meant to focus the next input at that index but this doesn't seem to work but the style changes.

(焦点功能旨在将下一个输入焦点放在该索引上，但这似乎不起作用，但是样式发生了变化。)

How do i go about this?

(我该怎么办？)

Thanks

(谢谢)

  ask by WhiteHox translate from so

Answer 1

I suggest to use single hidden TextInput , and render digits in simple View -s, based on input's value.

(我建议使用单个隐藏的 TextInput ，并根据输入的值在简单的View -s中呈现数字。)

I see no reason to have different inputs for 4 digit code.

(我认为没有理由对4位数字代码使用不同的输入。)

However if you need to use different inputs, you have to control their focus states in imperative way (with refs ).

(但是，如果需要使用不同的输入，则必须以命令方式（使用refs ）控制其焦点状态。)

See focus() method.

(请参见focus()方法。)

Also there are some bugs with this method ( https://github.com/facebook/react-native/issues/19366 )

(这种方法也存在一些错误（ https://github.com/facebook/react-native/issues/19366 ）)

See docs here https://facebook.github.io/react-native/docs/textinput

(在这里查看文档https://facebook.github.io/react-native/docs/textinput)