React Native - 在最大长度后移至下一个输入

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>

小吃链接

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