React Native - 调用函数

我是新手,react-native但一直在玩创建一个简单的登录UI.我有一个登录组件,然后两个用于单独的表单组件loginForm和forgotPasswordForm.

在我的登录组件上,我有一个renderForm函数正在尝试确定我们是否应该显示loginForm或者forgotPasswordForm我认为它将基于state.

登录组件:

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

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

  render() {
    return (
      

        
          
          Behavior Tracking System
        

        
          {this.renderForm()}
        

      
    );
  }
}

这是我的LoginForm,其中包含以下链接forgotPasswordFunction:

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 (
      
        
         this.passwordInput.focus()}
          keyboardType="email-address"
          autoCapitalize="none"
          autoCorrect={false}
          style={styles.input}
        />
         this.passwordInput = input}
        />
        
          LOGIN
        
        
          Trouble logging in? 
          
            Click Here.
          
        
      

    );
  }
}

我可能会对应该放置一些代码的地方感到困惑.我假设,因为LoginComponent包含表单字段本身,那就是我将切换逻辑确定是否显示loginForm或forgotPasswordForm.

我的问题是onClick在loginForm忘记密码链接中.不完全确定如何更新登录组件以切换表单.

我的目标是当按下"Click Here"链接时,它会加载密码恢复字段而不是登录字段.

基本上,您需要创建一个函数来更新父组件中的状态并将其传递给子组件.现在,如果您this.props.forgotPasswordForm()在LoginForm组件内部调用,它将更新父级中的状态并改为呈现ForgotPassword组件.

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 ;
      break;
      case 'loginForm':
        return ; //pass method to child
      break;
      default:
        return ;
      break;
    }
  }
  // Create a function that will update the state in parent
  forgotPasswordForm = () => {
    this.setState({ display: 'forgotPasswordForm' });
  }

  render() {
    return (
      

        
          
          Behavior Tracking System
        

        
          {this.renderForm()}
        

      
    );
  }