问题
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