React 네이티브 - 함수 호출

Question

저는 react-native을 처음 사용하지만 간단한 로그인 UI를 만드는 것으로 놀고 있습니다. 로그인 구성 요소가 있고 loginForm 및 forgotPasswordForm에 대한 두 개의 개별 폼 구성 요소가 있습니다. 내 로그인 구성 요소에

, 나는 우리가 내가 state 기반으로 할 것입니다 가정합니다 loginForm 또는 forgotPasswordForm을 보여 여부를 결정하려고하는 renderForm 기능을 가지고있다.

로그인 구성 요소 :

export default class LoginForm extends Component { 

    forgotPasswordForm(){ 
    // Thought I could setState here so that the loginComponent would update and see the state and render the forgotPasswordForm instead 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <StatusBar 
      barStyle="light-content" 
     /> 
     <TextInput 
      placeholder="username or email" 
      placeholderTextColor="rgba(255,255,255,0.7)" 
      returnKeyType="next" 
      onSubmitEditing={() => this.passwordInput.focus()} 
      keyboardType="email-address" 
      autoCapitalize="none" 
      autoCorrect={false} 
      style={styles.input} 
     /> 
     <TextInput 
      placeholder="password" 
      placeholderTextColor="rgba(255,255,255,0.7)" 
      secureTextEntry={true} 
      returnKeyType="go" 
      style={styles.input} 
      ref={(input) => this.passwordInput = input} 
     /> 
     <TouchableOpacity style={styles.buttonContainer}> 
      <Text style={styles.buttonText}>LOGIN</Text> 
     </TouchableOpacity> 
     <View style={styles.forgotPasswordContainer}> 
      <Text style={styles.forgotPasswordText}>Trouble logging in? </Text> 
      <TouchableOpacity onPress={this.forgotPasswordForm()}> 
      <Text style={styles.activeLink}>Click Here.</Text> 
      </TouchableOpacity> 
     </View> 
     </View> 

    ); 
    } 
} 

는이 코드의 일부는 있어야 할 곳에에서 조금 혼동 될 수있다 : 여기

export default class Login extends Component { 
    state = { 'display': '' }; 

    // Render the content 
    renderForm(){ 
    // What page should show? 
    switch(this.state.display){ 
     case 'forgotPasswordForm': 
     return <ForgotPassword />; 
     break; 
     case 'loginForm': 
     return <LoginForm />; 
     break; 
     default: 
     return <LoginForm />; 
     break; 
    } 
    } 

    render() { 
    return (
     <KeyboardAvoidingView behavior="padding" style={styles.container}> 

     <View style={styles.logoContainer}> 
      <Image 
      style={styles.logo} 
      source={require('../../images/logo.png')} 
      /> 
      <Text style={styles.logoText}>Behavior Tracking System</Text> 
     </View> 

     <View style={styles.formContainer}> 
      {this.renderForm()} 
     </View> 

     </KeyboardAvoidingView> 
    ); 
    } 
} 

는 forgotPasswordFunction에 대한 링크가 포함되어 내 LoginForm입니다 놓았다. 나는 LoginComponent가 폼 필드 자체를 포함하고 있다고 가정하기 때문에, 우리는 loginForm 또는 forgotPasswordForm을 보여줄지를 결정하기 위해 스위치 로직을 넣을 곳을 가정한다.

내 문제는 forgotPassword 링크에 대해 loginForm에있는 onClick입니다. 양식을 전환하기 위해 로그인 구성 요소를 업데이트하는 방법을 모르는 경우.

내 목표는 '여기를 클릭하십시오 "링크를 눌렀을 때, 대신 로그인 필드의 비밀 번호 복구 필드를로드하는 것입니다.

Answer 1

기본적으로 상위 구성 요소의 상태를 업데이트하고 하위 구성 요소로 전달하는 함수를 만들어야합니다. 이제 을 LoginForm 구성 요소 안에 호출하면 부모의 상태가 업데이트되고 대신 ForgotPassword 구성 요소가 렌더링됩니다. "경고 : setState를 (...) : -

export default class Login extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     display: 'loginForm' 
    }; //this is how you set up state 
    } 

    // Render the content 
    renderForm =() => { 
    // What page should show? 
    switch(this.state.display){ 
     case 'forgotPasswordForm': 
     return <ForgotPassword />; 
     break; 
     case 'loginForm': 
     return <LoginForm forgotPasswordForm={this.forgotPasswordForm} />; //pass method to child 
     break; 
     default: 
     return <LoginForm forgotPasswordForm={this.forgotPasswordForm} />; 
     break; 
    } 
    } 
    // Create a function that will update the state in parent 
    forgotPasswordForm =() => { 
    this.setState({ display: 'forgotPasswordForm' }); 
    } 

    render() { 
    return (
     <KeyboardAvoidingView behavior="padding" style={styles.container}> 

     <View style={styles.logoContainer}> 
      <Image 
      style={styles.logo} 
      source={require('../../images/logo.png')} 
      /> 
      <Text style={styles.logoText}>Behavior Tracking System</Text> 
     </View> 

     <View style={styles.formContainer}> 
      {this.renderForm()} 
     </View> 

     </KeyboardAvoidingView> 
    ); 
    }