React Native: Как перейти к следующему файлу ввода после нажатия кнопки “далее” на клавиатуре?

#javascript #android #ios #reactjs #react-native

Вопрос:

           <TextInput
            // ...
            returnKeyType = {"next"}
            returnKeyType='go'
          />
 

этот кодвведите описание изображения здесь не ведет поле ввода «перейти» / «далее» к следующему
Как добавить стрелки «далее» и «предыдущий» на клавиатуру в iOS. И установите кнопку «возврат»/»далее» на клавиатуре, чтобы перейти к следующему полю в react native.

Комментарии:

1. Вы должны реализовать вызываемый метод onSubmitEditing , который запускается при нажатии этой кнопки

2. используйте событие ввода и, используя фокус свойства ввода, вы можете переместить курсор на следующий ввод для ссылки, которую вы можете проверить здесь davidltran.com/blog/focus-next-input-react-native/.

3. @RohitKumar Большое спасибо, что это помогло!!! onSubmitEditing={() => this.passwordRef.focus()} ref={ref => this.passwordRef = ref}

Ответ №1:

Вы можете сфокусировать следующий ввод, используя ссылку на ввод текста.

       const refPasswordInput = useRef(null);

      const focusOnPassword = () => {
        if (refPasswordInput amp;amp; refPasswordInput.current) {
           refPasswordInput.current.focus();
        }
      };

      const hideKeyboard = () => {
        Keyboard.dismiss()
      };

      <TextInput
        ...
        blurOnSubmit={false}
        returnKeyType="next"
        onSubmitEditing={focusOnPassword}
      />

      <TextInput
        ref={refPasswordInput}
        ...
        returnKeyType="done"
        onSubmitEditing={hideKeyboard}
      />