2017-12-31 19 views
1

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; 

답변

0

사용 의 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> 
관련 문제