React Native - 调用函数

Question

我是react-native的新手，但一直在玩创建一个简单的登录界面。我有一个Login组件，然后是loginForm和forgotPasswordForm的两个单独的表单组件。

在我的登录组件上，我有renderForm函数正在尝试确定我们是否应该显示loginForm或forgotPasswordForm，我认为这将基于{{1} }}

登录组件：

state

以下是我的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> ); } } ，其中包含指向LoginForm的链接：

forgotPasswordFunction

我可能会对应该放置一些代码的地方感到困惑。我假设，因为LoginComponent包含表单字段本身，我将把切换逻辑放在哪里，以确定我们是否显示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> ); } } 或loginForm。

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

我的目标是当＆＃34;点击这里＆＃34;按下链接，它会加载密码恢复字段而不是登录字段。

Answer 1

基本上你需要创建一个函数来更新父组件中的状态并将其传递给子组件。现在，如果您在LoginForm组件中调用this.props.forgotPasswordForm()，它将更新父级中的状态并改为呈现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 <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>
    );
  }