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

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状态并切换到路由组件

Answer 1

您需要声明一种回调方法，该回调方法将更改app.js中的状态变量并传递登录组件中的回调方法，然后只需从OnClick事件调用该方法即可。这是一个代码示例fo 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>