似乎无法聚焦下一个文本输入(反应原生)

Question

我对React有一些经验，但仍在努力了解React Native。我正在做一个小项目，我正在做登录表单。我想拥有它，这样当你在键盘上按下next时，它就会移动到下一个输入字段。我已经制作了一个自定义的TextInput组件，因为我将在几个不同的地方使用它。

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;

然后在登录页面上，它是这样实现的：

<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>

我的理解是，通过引用下一个输入并使用.focus((，它应该可以工作，但当我这样做时，它会抛出一个错误，即this.passwordInput.focus(是未定义的

Answer 1

您的ref不是TextInput，而是FloatingLabelInput，并且没有焦点方法。您试图关注FloatingLabelInput，它不是TextInput，而是一个包含TextInput的组件。

您需要在此处使用forwardRef。

来自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>;