时间戳

首页 > 解决方案 > 如何从其他组件 React Native 更新主组件状态

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

问题描述

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

应用程序.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}/>
      )
    }

  }
}

登录.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 组件

标签： reactjsreact-native

解决方案

您需要声明一个回调方法，该方法将更改 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>

推荐阅读