다음을 누를 때 다음 상태 비 저장 입력에 초점을 맞추는 방법

Question

React Native에서 앱을 개발 중입니다. 로그인 페이지에 Redux 형식이 있습니다. 전자 메일 입력 필드에서 "다음"을 누르면 암호 입력에 초점을 맞추고 싶습니다.

renderInput() 내부의 입력에서 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를 사용해야합니다 onSubmitEditing로 :

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