次のステートレス入力をフォーカスするにはどうすればいいですか？

Question

私はReact Nativeでアプリを開発しています。私のログインページには、Reduxのフォームがあります。電子メールの入力欄で「次へ」を押すと、入力したパスワードに集中したい。

renderInput（）内のinputでonSubmitEditingを使用してみましたが、refへのアクセスと組み合わせて使用​​しましたが、残念なことに成功しませんでした（要素はステートレスなので参照できません）。 onSubmitEditingと

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

使用のTextInputあなたはまた、例えば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>