Реагировать на ввод текста в исходном фокусе при следующем нажатии

Question

Примечание: я знаю, что есть много похожих вопросов, и я пытался реализовать ответы на них, но безуспешно.

В моем приложении React Native есть форма, которая принимает конечное число количество пользовательских компонентов для ввода текста. Я пытаюсь найти решение для перехода к следующему входу, когда пользователь нажимает кнопку возврата. Я пробовал несколько пакетов, но ни один из них не работал с Android. Я также пытался использовать ссылки, но мне не повезло (обратите внимание, что форма является функциональным компонентом). Он продолжает возвращаться неопределенным, когда я пытаюсь получить доступ к нему внутри компонента метки с плавающей точкой.

Пользовательский компонент:

<FloatLabelTextInput
          value={billingFirstName}
          onChangeText={newText => setBillingFirstName(newText)}
          autoCorrect={false}
          style={globalStyles.textInput}
          label="Billing First Name"
        />


Компонент ввода текста с плавающей меткой визуализирует ввод текста (с плавающими метками на основе материала).


import React, { Component } from 'react';
import {
  Alert,
  Button,
  View,
  TextInput,
  Animated,
  Image,
  TouchableOpacity,
} from 'react-native';
import colors from '../utils/colors';

export default class FloatLabelTextInput extends Component<Props> {
  static defaultProps = {
    editable: true,
    showHelp: false,
  };

  state = {
    isFocused: false,
  };



  componentDidUpdate() {
    Animated.timing(this.animatedIsFocused, {
      toValue: this.state.isFocused || this.props.value !== '' ? 1 : 0,
      duration: 200,
    }).start();
  }

  handleFocus = () => {
    this.setState({ isFocused: true });
    if (this.props.onFocus) {
      this.props.onFocus();
    }
  };

  handleBlur = () => this.setState({ isFocused: false });

  focus() {
    this.ref.focus();
  }

  blur() {
    this.ref.blur();
  }

  updateCursorPosition() {
    this.ref.setNativeProps({
      selection: { start: 0, end: 0 },
    });
    this.ref.setNativeProps({
      selection: {
        start: this.props.value.length,
        end: this.props.value.length,
      },
    });
  }

  showAlert = helpText => {
    Alert.alert(helpText.title, helpText.body, [{ text: helpText.button }], {
      cancelable: helpText.cancelable,
    });
  };

  render() {
    const { label, style, isShowingRightAccessory, ...props } = this.props;
    const labelStyle = {
      position: 'absolute',
      left: 0,
      top: this.animatedIsFocused.interpolate({
        inputRange: [0, 0.9],
        outputRange: [15, 0],
      }),
      fontSize: this.animatedIsFocused.interpolate({
        inputRange: [0, 1],
        outputRange: [18, 14],
      }),
    };
    return (
      <View
        style={[
          this.props.style,
          { paddingTop: 18, opacity: this.props.editable ? 1 : 0.5 },
        ]}>
        <Animated.Text
          style={[
            labelStyle,
            {
              color: colors.lightBlue,
            },
          ]}
          allowFontScaling={false}>
          {label}
        </Animated.Text>
        <TextInput
          {...props}
          caretHidden={false}
          underlineColorAndroid="transparent"
          ref={c => {
            this.ref = c;
          }}
          selectionColor={colors.lightBlue}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          blurOnSubmit
          allowFontScaling={false}
        />
        {this.props.showHelp && (
          <TouchableOpacity
            style={{
              marginTop: 20,
              position: 'absolute',
              alignSelf: 'flex-end',
            }}
            onPress={() => this.showAlert(this.props.helpText)}>
            <Image
              style={{
                height: 15,
                width: 15,
              }}
              source={require('../../assets/icon_Tooltip.png')}
            />
          </TouchableOpacity>
        )}

        <View style={{ height: 1, width: '100%', backgroundColor: 'white' }} />
      </View>
    );
  }
}

Я предполагаю, что я хочу реализовать решение на основе ссылок, и я ищу совет, как это сделать с помощью пользовательского текстового компонента

Answer 1

Хорошо, я смог добиться этого с помощью useRef следующим образом:

const billingFirstNameInput = useRef(null);

<FloatLabelTextInput
          value={billingFirstName}
          onChangeText={newText => setBillingFirstName(newText)}
          autoCorrect={false}
          style={globalStyles.textInput}
          label="Billing First Name"
          ref={billingFirstNameInput}
          onSubmitEditing={() => {
            billingLastNameInput.current.focus()
          }}
        />