Блог

Я в значительной степени новичок в react native в настоящее время я создаю небольшое приложение, чтобы получить лучшее представление об этом. я использую react-native-paper в качестве библиотеки пользовательского интерфейса. В настоящее время я застрял в проблеме, т.Е. у меня было два поля ввода с максимальной длиной, равной 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>
 

Ссылка на закуску

Прежде всего, создайте 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: '' });
}}
 

Рабочий пример, основанный на существующем ответе @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