react-native - React Native - 调用一个函数

Question

我是 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 <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 的链接:

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>

    );
  }
}

我可能对某些代码应该放在哪里感到有点困惑。我假设因为 LoginComponent 本身包括表单字段，所以我会在其中放置切换逻辑以确定我们是否显示 loginForm 或 forgotPasswordForm。

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

我的目标是，当按下“单击此处”链接时，它会加载密码恢复字段而不是登录字段。

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