How can I create a “global state” in react native so I can send a user input to another page?

喜你入骨 提交于 2021-02-05 11:14:06

问题


I am trying to take a user input(email) and send it to the password page for display. I am under impression by attempt below is not working because the input is local and cannot be seen by the password page? How should I go about this? Something with reduxes? Am I on the right track?

If you guys need more code let me know, I appreciate any help more than you know!

Email page

constructor() {
    super();

    this.state = {
      color1: '#A2A2A2',
      inputValue: '', //add state here
    };
  }

  updateInputValue = (event) => {
    this.setState({
        inputValue: event.target.value
    });
}

navigateToCreatePasswordScreen = () => {
  this.props.navigation.navigate("CreatePassword", {
    inputValue: this.state.inputValue,
  });
};

  render() {
    return (
        <View style={styles.containerMain}>
        
        {/* Email Input */}
      <Container style = {styles.emailInput}>
        
        <Form>
          <Item floatingLabel >
            <Label style={{color:this.state.color1}}>Email Address</Label>
                <Input
                value = {this.state.inputValue}
                onChange={(this.updateInputValue)}                
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                onFocus={() => this.setState({color1: '#F7018D'})}               
                onBlur={() => this.setState({color1: '#A2A2A2'})}
                />
          </Item>
        </Form>
      </Container>

 
      <View style={styles.containerBottom}>   
      <ContinueButton
       onPress={() => this.navigateToCreatePasswordScreen()}
      /> 
      </View>

password page

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import ContinueButton from '../components/ContinueButton';
import BackArrow from '../components/BackArrow';
import { Container, Content, Header, Form, Input, Item, Label, } from 'native-base';

export default class CreatePasswordPage extends Component {

  /* Colors Input label*/
  constructor() {
    super();

    this.state = {
      color1: '#A2A2A2'};}
  
  render() {

    const {inputValue} = this.props.route.params;

    return (
        <View>
       
      <View>   
    <Text style={styles.caption}>{inputValue}</Text> 
      </View>
        
        </View>

来源:https://stackoverflow.com/questions/65544097/how-can-i-create-a-global-state-in-react-native-so-i-can-send-a-user-input-to

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!