Question

我正在登录页面。所以我用islogin声明了一个状态。现在我确实检查了一个条件。如果islogin为false，则返回登录页面，否则将转到组件路径。

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import {AppNavigator} from './route-components/route';
import Login from './Components/login/login'

const AppContainer = createAppContainer(AppNavigator);



export default class App extends React.Component {
  constructor(props){
    super(props)
    this.state ={
      signin: false
    }
  }


  render() {

    if(this.state.signin){
      return (
        <AppContainer />
     );
    } else {
      return (
       <Login islogin={this.state.signin} change={this.change}/>
      )
    }

  }
}

login.js

import React from "react";
import { View, Text } from "react-native";
import { Button, WingBlank, WhiteSpace, InputItem } from 'antd-mobile-rn';


export default class Login extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            signin: this.props.islogin
        }
    }

  render(){
    const {change} = this.props;
    return(
        <View style={style}>
            <InputItem  type="text" placeholder="Enter Username"  > 
        </InputItem>
            <WhiteSpace />
            <InputItem  type="text" placeholder="Enter Password" > 
         </InputItem>
            <WhiteSpace />
            <Button style={{margin: 10}} onClick={change}>Login</Button>
        </View>
    )
  }
}

现在尝试单击登录按钮时，它将更改app.js状态并切换到Route组件

Answer 1

您需要声明一个回调方法，该方法将更改app.js中的状态变量，并在登录组件中传递该回调方法，并仅从onclick事件中调用该方法。这是来自app.js的代码示例

userLogIn = () => this.setState({ signin: true });
<Login userLogIn={this.userLogIn} change={this.change}/>

在Login.js中只需替换

<Button style={{margin: 10}} 
   onClick={this.props.userLogIn}>Login
</Button>

如何从其他组件React Native更新主组件状态

1 个答案: