React Native - 在 maxlength 之后移动到下一个输入

Question

我对 react native 非常陌生，目前我正在构建一个小应用程序以更好地了解这一点，我正在使用 react-native-paper 作为 ui 库。目前我遇到了一个问题，即我有两个输入字段，最大长度为 3。当第一个输入达到其最大长度时，我需要自动移动到下一个输入，即 3。我尝试通过添加 returnKeyType="next" 到输入字段，但它不起作用。

        <View style={styles.textinputViewleft}>
            <NumberInput 
            style={styles.textinput} 
            label="Digit"
            returnKeyType="next"
            value={digit.value}
            onChangeText={(text) => setDigit({ value: text, error: '' })}
            error={!!digit.error}
            errorText={digit.error}
            keyboardType="numeric"
            maxLength={3} />
        </View>
        <View style={styles.textinputView}>
            <NumberInput 
            style={styles.textinput} 
            label="Count"
            value={count.value}
            onChangeText={(text) => setCount({ value: text, error: '' })}
            error={!!count.error}
            errorText={count.error}
            keyboardType="numeric"
            maxLength={3}  />
        </View>

Snack link

Answer 1

首先，创建ref 以访问输入。

const ref = React.useRef();

然后将其传递给第二个TextInput。

<NumberInput 
  ref={ref}
  style={styles.textinput}
  ...
/> 

当第一个输入的长度达到 3 时，调用focus 将光标插入到第二个输入中。

onChangeText={(text) => {
  if (text.length === 3) {
    ref.current.focus();
  }
  setDigit({ value: text, error: '' });
}}

Answer 2

基于@Leri Gogsadze 现有答案的工作示例：

export default function App() {
  const [numOne, setNumOne] = useState('');
  const [numTwo, setNumTwo] = useState('');
  const ref = useRef();
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="enter number"
        maxLength={3}
        value={numOne}
        onChangeText={(value) => {
          setNumOne(value);
          if (value.length === 3) {
            ref.current.focus();
          }
        }}
        returnKeyType="next"
      />
      <TextInput
        style={styles.input}
        ref={ref}
        placeholder="enter name"
        maxLength={3}
        value={numTwo}
        onChangeText={(value) => setNumTwo(value)}
      />
    </View>
  );
}

工作示例应用程序：Expo Snack