在React Native中更改其他组件的状态

Question

我是个新来的土生土长的人。我有一个屏幕，它将根据其当前状态进行渲染，如下所示。默认情况下（初始状态），它将呈现登录屏幕。App.js

import React, { Component } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Header } from './components/Export';
import LoginBox from './components/LoginBox';
import AdditionalActivity from './components/AdditionalActivity';
import SignUp from './components/SignUp';


export default class App extends Component {

  state = {
    status: 'initial'
  }

  renderBasedOnLoggedInState() {
    if(this.state.status == 'initial') {
      return (
        <View>
          <Header headerText="APP NAME"/>
          <LoginBox/>
          <AdditionalActivity />
        </View>
      );
    } else if (this.state.status == 'logged') {
      return (
        <View>
          <Text>Welcome to my application</Text>
        </View>
      )
    } else {
      return (
        <View>
          <Header headerText="APP NAME"/>
          <SignUp/>
          <AdditionalActivity />
        </View>
      )
    }
  }

  render() {
    return (
      <View>
        {this.renderBasedOnLoggedInState()}
      </View>
    );
  }
}

当下面的登录成功后，我需要将组件应用程序的状态从“初始”更改为“已登录”。我怎么做呢？这里的登录函数仅用于测试目的，所以不必太在意它。LoginBox.js

import React, { Component } from 'react'
import { Alert, Text, View, TouchableOpacity, Button } from 'react-native'
import GreyTextbox from './GreyTextbox'


export default class LoginBox extends Component {
    state = {
        username: '',
        password: '',
    }

    Login()
    {    
        var username = this.state.username;
        var password = this.state.password;
        var userdata = require('./a.json');

        var count = 0;
        for (let j = 0; j < 2; j++) {
            if ((userdata[j].username == username) && ( userdata[j].password == password))
            {
                Alert.alert("true");    
                count++;
            }             
        }   
        if(count == 0)
        {
            Alert.alert("false");   
        }
    }

    render() {
        return (
            <View style={styles.containerStyle}>
                <GreyTextbox
                    secureOption={false}
                    placeholder="username"
                    value={this.state.username}
                    onChangeText={username => this.setState({username})}
                />
                <GreyTextbox
                    secureOption={true}
                    placeholder="password"
                    value={this.state.password}
                    onChangeText={password => this.setState({password})}
                />
                <TouchableOpacity
                    style={styles.buttonStyle}
                    onPress={this.Login.bind(this)} >                   >
                    <Text style={styles.textStyle}>Log In</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = {
    containerStyle: {
        //flex: 0.35,
        height: 180,
        justifyContent: 'space-between',
        marginTop: 40,
        marginLeft: 30,
        marginRight: 30,
        position: 'relative'
    },
    buttonStyle: {
        borderWidth: 1,
        borderColor: '#3da8ff',
        alignContent: 'center',
        justifyContent: 'center',
        marginLeft: 25,
        marginRight: 25,
        paddingTop: 5,
        paddingBottom: 5,
    },
    textStyle: {
        color: '#3da8ff',
        alignSelf: 'center',
        fontSize: 20
    }
}

Answer 1

创建一个更改状态的方法，并将其作为prop传递给子组件。

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {status: 'initial'}
    this.changeState = this.changeState.bind(this)
  }

  changeState() {
    this.setState({
      status: 'logged'
    })
  }

  render() {
    return (
      <View>
        <Header headerText="APP NAME"/>
          <LoginBox changeState = {this.changeState}/>
        <AdditionalActivity />
      </View>
  }
}

在LoginBox.js中，您可以通过道具调用它：

class LoginBox extends Component {

  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
}

  login() {    
    this.props.changeState;
  }

  render() {
    return (
      {...}
      <TouchableOpacity
        style={styles.buttonStyle}
        onPress={this.login} >                   >
          <Text style={styles.textStyle}>Log In</Text>
      </TouchableOpacity>
    )
  }
}

另一个有用的提示：永远不要在渲染方法中绑定函数！