Question

我正在写一个简单的应用程序有2个屏幕：登录和主要。在文件Login.js中：

import React, {Component} from 'react';
import {Text, View, Button, StyleSheet, TextInput} from 'react-native';

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user_name: '',
            password: ''
        };
    }
    render() {
        return (
            <View>
                <Text>Username:</Text>
                <TextInput
                    onChangeText={(text) => {
                    this.setState({user_name: text});
                }}/>
                <Text>Password:</Text>
                <TextInput
                    secureTextEntry={true}
                    onChangeText={(text) => {
                    this.setState({password: text});
                }}/>
                <View style={styles.wrapper}>
                    <Button
                        onPress={this.props.click}
                        title="Login"
                        accessibilityLabel="Login to system"/>
                </View>
            </View>
        );
    }
}

Login.propType = {
    user: React.PropTypes.string.isRequired,
    pass: React.PropTypes.string.isRequired
}

const styles = StyleSheet.create({
    wrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around'
    }
});

登录成功时我有了render.ces的Main.js。在文件index.android.js中，我为AppRegistry声明了类RouteTest：

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  Alert,
  Button
} from 'react-native';
import Main from './Screen/Main.js';
import Login from './Screen/Login.js';
class RouteTest extends Component {
  renderScene(route, navigator) {
    switch (route.name) {
      case 'main':
        return (<Main />);
      case 'login':
        return (<Login
          click={()=>{ 
            if(this.state.user_name == 'abc' && this.state.password == '123') { 
              navigator.push({name: 'main'}) 
            } else {
              Alert.alert("Login failed");
            }
          }}/>);
    }
  }
  render() {
    return (<Navigator
      initialRoute={{
      name: 'login'
    }}
      renderScene={this.renderScene}/>);
  }
}

AppRegistry.registerComponent('RouteTest', () => RouteTest);

当我从类Login的TextInput获取user_name和密码时，我使用： this.state.user_name但无效。我的问题是：如何在类LoginTest中获取用户输入的值。感谢。

Answer 1

您可能想要使用react redux。使用它你可以快速而简单地从任何地方获取任何东西。

有点难以设置但是一旦你设置好易于管理并且你在应用中的任何地方获取信息，请参阅此链接：Getting started with Redux。

它涵盖了使用redux的不同方面。从一个简单的计数器示例开始。它还涉及如何管理api调用，其中结果可以从应用程序的任何位置访问。

更新：更快的解决方案是使用React Context API。这是一个practical example。如果你想要一个完整的状态管理，请改用redux

祝你好运！

Answer 2

尝试查看https://facebook.github.io/react/docs/refs-and-the-dom.html

基本上，您可以使用refs set从props访问Login RouteTest，例如。

<Login     
ref={ref => this._login = ref}
/>

之后，你可以访问这样的道具：this._login.xxx

以本机方式从组件之间发送数据

2 个答案: