react-native - React Native-调用函数

我是react-native的新手，但是一直在创建一个简单的登录UI。我有一个Login组件，然后有两个分别用于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。

我的问题是forgotPassword链接的onClick中的loginForm。不完全确定如何获取更新登录组件以切换表单的信息。



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

最佳答案

基本上，您需要创建一个函数来更新父组件中的状态并将其传递给子组件。现在，如果您在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>
    );
  }

关于react-native - React Native-调用函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41641054/