React native React Native-调用函数

我对

react native

不熟悉，但一直在尝试创建一个简单的登录UI。我有一个登录组件，然后是两个独立的表单组件，分别用于

loginForm

和

forgotPasswordForm

在我的登录组件上，我有一个

renderForm

函数，它试图确定我们是应该显示

loginForm

还是

forgotPasswordForm

，我认为这是基于

状态的

登录组件：

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>
    );
  }
}

我可能对这些代码应该放在哪里有些困惑。我假设由于LoginComponent包含表单字段本身，因此我将在这里放置切换逻辑，以确定是显示
loginForm
还是
放弃密码表单

我的问题是在
loginForm
中单击上述密码链接的
onClick
。不完全确定如何得到它来更新登录组件以切换表单


我的目标是，当按下“单击此处”链接时，它将加载密码恢复字段，而不是登录字段。
基本上，您需要创建一个函数来更新父组件中的状态并将其传递给子组件。现在，如果在LoginForm组件中调用
this.props.forgotPasswordForm（）
，它将更新父组件中的状态，并呈现ForgotPassword组件

导出默认类登录扩展组件{
建造师（道具）{
超级（道具）；
this.state={
显示：“loginForm”
}；//这就是设置状态的方法
}
//呈现内容
renderForm=（）=>{
//应该显示什么页面？
开关（this.state.display）{
案例“forgotPasswordForm”：
返回；
打破
案例“loginForm”：
return；//将方法传递给子对象
打破
违约：
返回；
打破
}
}
//创建一个将更新父级中状态的函数
forgotPasswordForm=（）=>{
this.setState（{display:'forgotPasswordForm'}）；
}
render（）{
返回(
行为跟踪系统
{this.renderForm（）}
);
}
感谢您的回复-在进行这些更改后，我收到以下错误：“警告：设置状态（…）：无法在现有状态转换期间更新（例如在
渲染
或其他组件的构造函数中）”。该页面也默认为忘记密码表单，而不是登录。可能我遗漏了其他内容？我在此状态下将显示编辑为“loginForm”。您是否也进行了我所做的所有更改？我还将创建函数的方式从renderForm（）{}更改为renderForm=（）=>{}哦，这个错误是因为您在onPress中调用了this.forgotPasswordForm（），它应该是
onPress={this.props.forgotPasswordForm}
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>

    );
  }
}