Wie fokussiere ich die nächste zustandslose Eingabe, wenn ich weiter drücke

Question

Ich entwickle eine App in React Native. Auf meiner Anmeldeseite habe ich ein Formular mit Redux. Ich möchte die Passworteingabe fokussieren, nachdem ich im E-Mail-Eingabefeld auf "Weiter" geklickt habe.

Ich versuchte mit onSubmitEditing auf der Eingabe innerhalb renderInput() in Kombination mit dem Zugriff auf refs, aber leider ohne Erfolg (refs nicht verfügbar, weil die Elemente zustandslos sind).

Mein Code:

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

Verwenden TextInput- mit onSubmitEditing Sie auch KeyboardAvoidingView zum Beispiel verwendet werden soll:

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