react-native - 按下一步时如何聚焦下一个无状态输入

Question

我正在用 React Native 开发一个应用程序。在我的登录页面上，我有一个带有 Redux 的表单。在电子邮件输入字段上点击“下一步”后，我想集中输入密码。

我尝试在 renderInput() 内的 Input 上使用 onSubmitEditing 并结合访问 refs，但不幸的是没有成功(refs 不可用，因为元素是无状态的)。

我的代码:

class LoginForm extends React.Component<Props, State> {
    textInput: any;

    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            isLoading: false,
        }
    }

    renderInput({ input, disabled, label, type, meta: { touched, error, warning } }) {
        return (
            <Item error={error && touched}>
                <Icon active name={input.name === "email" ? "person" : "unlock"} />
                <Input
                    ref={c => (this.textInput = c)}
                    placeholder={input.name === "email" ? "Email" : "Password"}
                    secureTextEntry={input.name === "password"}
                    editable={!disabled}
                    // autoFocus={input.name === "email"}
                    returnKeyType={input.name === "email" ? "next" : "send"}
                    keyboardType={input.name === "email" ? "email-address" : "default"}
                    autoCapitalize="none"
                    blurOnSubmit={false}
                    {...input}
                />
            </Item>
        );
    }

    render() {
        const { isLoading } = this.state;
        const form = (
            <Form>
                <Field
                    name="email"
                    disabled={isLoading}
                    component={this.renderInput}
                    validate={[email, required]}
                    onChange={(event, value) => this.setState({email: value})}
                />
                <Field
                    name="password"
                    disabled={isLoading}
                    component={this.renderInput}
                    validate={[minLength8, maxLength15, required]}
                    onChange={(event, value) => this.setState({password: value})}
                />
                {isLoading && (
                    <ActivityIndicator style={styles.loading} size="large" animating={true} />
                )}
                <View style={{padding: 10}}>
                    <Button block} disabled={this.state.isLoading}>
                        <Text>Login</Text>
                    </Button>
                </View>
            </Form>
        );
        return <Login navigation={this.props.navigation} loginForm={form} />;
    }
}
const LoginContainer = reduxForm({
    form: "login",
})(LoginForm);
export default LoginContainer;

Answer 1

使用 文本输入 与 onSubmitEditing 你也应该使用 KeyboardAvoidingView 例如:

         <KeyboardAvoidingView>
                <TextInput
                    placeholder="Enter your Username"
                    returnKeyType="next"
                    onSubmitEditing={() => this.passwordInput.focus()}
                    keyboardType="email-address"
                    autoCapitalize="none"
                    autoCorrect={false}
                    style={styles.input}
                />
                <TextInput
                    placeholder="Enter your Password"
                    returnKeyType="go"
                    secureTextEntry
                    style={styles.input}
                    ref={(input) => this.passwordInput = input}
                />
       </KeyboardAvoidingView>