反応したネイティブの親コンポーネントから子コンポーネントに小道具を渡すには？

Question

ユーザー名とパスワードの資格情報を取得する単純なログインページを設計しています。認証チェックを行うにはこのデータが必要で、合格すれば2番目のビューに進みます。私の問題は、ユーザー名とパスワードの値を子コンポーネント、つまりSecureView jsに渡すことができなかったことです。

これは私がすでに書いたコードです。どこでも検索しましたが、私の問題の初心者に優しいソリューションを見つけることに失敗しました。助けてください。

私のTextInputコード：

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

マイgetInitialState（）メソッド：

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

マイonSubmitPressed（）関数：

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

マイindex.androidファイル：

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

私のSecureViewのjsファイルで

のような、私はシンプルなテキスト要素を書かれている：

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

私の出力は、私から小道具を渡すための正しい方法は何な

Welcome ! 

として常にあります最初のファイルをSecureViewファイルに保存しますか？

Answer 1

onSubmitPressedには、定義されていないthis.props.usernameが渡されています。代わりにthis.state.usernameを使用してください。これは、あなたが設定しているものですthis.setState(...)