Question

我正在设计一个带有用户名和密码凭据的简单登录页面，我需要这些数据进行身份验证检查，如果通过，请转到第二个视图。我的问题是我无法成功将用户名和密码值作为道具传递给子组件，即SecureView js

这是我已经写过的代码。已到处搜索但未能找到适合我的问题的初学友好解决方案。请帮忙。

我的TextInput代码：

Console.ReadLine()

我的getInitialState（）方法：

<TextInput
                  style={styles.input_username}
                  placeholder=" Username"
                  placeholderTextColor="#000000"
                  onChange={(event) => this.setState({username: event.nativeEvent.text})}
                  value={this.state.username}
              />

我的onSubmitPressed（）函数：

  var login1 = React.createClass({
    getInitialState() {
      return {
        username: '',
        password: '',
            }
 },

我的index.android文件：

onSubmitPressed() {
this.props.navigator.push({
id: 'SecureView',
passProps: {
  username: this.props.username
            }
          });
 },

在我的SecureView js文件中，我编写了一个简单的文本元素：

'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
} from 'react-native';

var Login1 = require('./app/screens/login1');
var SecureView = require('./app/screens/SecureView');

var loginsimple = React.createClass({
 render: function() {
  return (
  //<loginsimple />
  <Navigator
        style={styles.navigatorContainer}
        initialRoute={{id: 'Login1'}}
        renderScene={this.navigatorRenderScene}
        username={this.props.username}/>
    );
  },

  navigatorRenderScene(route, navigator) {
    //  _navigator = navigator;
switch (route.id) {
  case 'Login1':
    return (<Login1 navigator={navigator}
      {...route.passProps}
        title="Login1"/>);
  case 'SecureView':
    return (<SecureView navigator={navigator}
      {...route.passProps}
        title="SecureView"/>);
 }
 },
  });

  var styles = StyleSheet.create({
   navigatorContainer: {
flex: 1,

 }
});
 AppRegistry.registerComponent('loginsimple', () => loginsimple);

我的输出总是如此

<Text> Welcome {this.props.username}!</Text>

将道具从我的第一个文件传递到SecureView文件的正确方法是什么？

Answer 1

在onSubmitPressed中，您正在传递未定义的this.props.username。请改用this.state.username，这是您使用this.setState(...)

设置的内容

如何在反应原生中将道具从父组件传递给子组件？

1 个答案: