似乎无法聚焦下一个 TextInput (React-Native)

Question

I've got a little experience with React, but still trying to figure out React-Native. I'm working on a little project, and I'm working on a login form. I would like to have it so that when you press next on the keyboard, then it moves on to the next input field. I've made a custom TextInput component, since I will be using it a few different places.

import React, { Component } from 'react';
import { Animated, TextInput, View } from 'react-native';
import { Easing } from 'react-native-reanimated';
import { primaryColor, whiteColor } from '../../../../assets/theme';

class FloatingLabelInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isFocused: false,
        }
        this.animatedText = new Animated.Value(this.props.value === '' ? 0 : 1);
        this.animatedTextField = new Animated.Value(0);
    }

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

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

    componentDidUpdate = () => {
        Animated.timing(this.animatedText, {
            toValue: (this.state.isFocused || this.props.value !== '') ? 1 : 0,
            duration: 200,
            easing: Easing.linear
        }).start();
        Animated.timing(this.animatedTextField, {
            toValue: this.state.isFocused ? 1 : 0,
            duration: 200,
            easing: Easing.linear
        }).start();
    }

    render() {
        const { label, ...props } = this.props;
        const labelStyle = {
            backgroundColor: whiteColor,
            color: this.animatedText.interpolate({
                inputRange: [0, 1],
                outputRange: ['#aaa', '#000']
            }),
            fontSize: this.animatedText.interpolate({
                inputRange: [0, 1],
                outputRange: [20, 14]
            }),
            left: 5,
            paddingHorizontal: 5,
            position: 'absolute',
            top: this.animatedText.interpolate({
                inputRange: [0, 1],
                outputRange: [26, 8]
            }),
            zIndex: 999
        };

        return (
            <View style={{ paddingTop: 18 }}>
                <Animated.Text style={labelStyle}>{label}</Animated.Text>
                <Animated.View style={{
                    borderColor: this.animatedTextField.interpolate({
                        inputRange: [0, 1],
                        outputRange: ['#555', primaryColor]
                    }),
                    borderRadius: 4,
                    borderWidth: 1,
                }}>
                    <TextInput
                        onBlur={this.handleBlur}
                        onFocus={this.handleFocus}
                        {...props}
                        style={{
                            color: '#000',
                            fontSize: 14,
                            height: 45,
                            paddingLeft: 10
                        }}
                    />
                </Animated.View>
            </View>
        );
    }
}

export default FloatingLabelInput;

and then on the login page, then it's implemented like this:

<View>
  <FloatingLabelInput
    blurOnSubmit={false}
    editable={true}
    keyboardType={'email-address'}
    label="Email"
    onChangeText={this.handleEmailChange}
    onSubmitEditing={() => this.passwordInput && this.passwordInput.focus()}
    ref={(input) => { this.emailInput = input; }}
    returnKeyType="next"
    value={this.state.email}
  />
  <FloatingLabelInput
    editable={true}
    label="password"
    onChangeText={this.handlePasswordChange}
    onSubmitEditing={() => this.login()}
    ref={(input) => { this.passwordInput = input; }}
    value={this.state.password}
  />
</View>

My understanding is that by referancing the next input and having .focus(), then it should work, but when I do this, then it throws an error that this.passwordInput.focus() is undefined

Answer 1

Your ref is not a TextInput, it's a FloatingLabelInput and it doesn't have a focus method. You are trying to focus FloatingLabelInput which is not a TextInput, rather it's a component that contains a TextInput.

You need to use forwardRef here.

Example from Facebook

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;