Javascript 将输入数据发送到另一页

我正在尝试获取一个输入并将其发送到另一个页面进行显示，这是到目前为止我拥有的代码，但我在我的密码页面上没有得到任何信息。如果你需要更多像我的样式表之类的代码，请告诉我！任何帮助都比你知道的要感激

 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>

constructor（）{
超级（）；
此.state={
颜色1:“#A2A2”，
inputValue:“”，//在此处添加状态
};
}
updateInputValue=（事件）=>{
这是我的国家({
inputValue:event.target.value
});
}
navigateToCreatePasswordScreen=（）=>{
this.props.navigation.navigate（“CreatePassword”{
inputValue:this.state.inputValue，
});
};
render（）{
返回(
{/*电子邮件输入*/}
电子邮件地址
this.setState（{color1:'#F7018D'}）
onBlur={（）=>this.setState（{color1:'#A2A2A2'}）}
/>
this.navigateToCreatePasswordScreen（）}
/> 

我希望显示电子邮件输入的页面

constructor() {
    super();

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

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

    return (
        <View style={styles.containerMain}>
       
         {/* Password Input */}
      <Container style = {styles.passwordInput}>
        
        <Form>
          <Item floatingLabel>
           <Label style={{color:this.state.color1}}>Password</Label>
              <Input
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                secureTextEntry={true}
                onFocus={() => this.setState({color1: '#F7018D'})}
                
                onBlur={() => this.setState({color1: '#A2A2A2'})}
         
              />
         </Item>
       </Form>
      </Container>

        <View style={styles.containerHeader}>
        <Text style={styles.title}>Create a Password</Text>
        </View>
        
      <View style={styles.containerCaption}>   
        <Text style={styles.caption}> Lets create your Password for 
 
        </Text> 
      </View>
      <View>   
    <Text style={styles.caption}>{inputValue}</Text> 
      </View>

      

      <View style= {styles.backArrowPlacement}>
      <BackArrow 
      onPress={() => this.props.navigation.navigate('SignUpEmail')} 
      />
      </View>
      
      <View style={styles.containerBottom}>   
      <ContinueButton
      onPress={() => this.props.navigation.navigate('PhoneVerification')} 
      /> 
      </View>
    </View>

    );
    }
}

constructor（）{
超级（）；
此.state={
颜色1:“#A2A2A2”}；}
render（）{
const{inputValue}=this.props.route.params；
返回(
{/*密码输入*/}
密码
this.setState（{color1:'#F7018D'}）
onBlur={（）=>this.setState（{color1:'#A2A2A2'}）}
/>
创建密码
让我们创建您的密码
{inputValue}
this.props.navigation.navigate（'SignUpEmail'）}
/>
this.props.navigation.navigate（'PhoneVerification'）}
/> 
);
}
}

如果您试图创建全局状态，则需要使用redux等中间件将输入保存为全局状态，以便在其他页面中使用，问题是输入仅为本地，因此只能在该文件中工作，请告诉我这是否有帮助：）。
编辑以添加示例：
如果您需要一个示例，我将向您展示一些代码片段，以便您理解该过程（但如果我是您，我将观看有关使用Redux创建全局状态的快速教程）。
因此，我将展示的示例是一个简单的过程，它接受用户输入，并在不同的页面上使用它来登录该用户（但我只展示我认为您需要理解的代码，以便自己进行登录）。
登录页面
因此，我从用户那里得到的变量将被称为user

const {user} = result;

我需要做的第一件事是使用redux将变量分派到全局状态，但在此之前，我需要初始化存储（这是存储变量以便在应用程序中使用的地方）
我这样做的原因是index.js文件：

import rootReducer from "./reducers";
import { Provider } from "react-redux";
import { createStore } from "redux";
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store = {store}>
      <App/>
</Provider>,
document.getElementById('root')
);

我在index.js文件（在reducer文件夹中）中所做的是将我创建的其他reducer合并到一个名为rootReducer的父变量中
（注意，您可以调用我称之为user*的变量，无论您想调用什么，我称之为user，但它不需要与您正在分配的变量匹配）。
我的userReducer.js文件如下所示：

import React from 'react';

export const userReducer = (state = null, action) => {
    // return action
    switch (action.type) {
        case "loggedIn":
            return action.payload

        case "logOff":
            return action.payload

        default:
            return state

    }
};

在我们开始使用它之前，这需要更多的解释。因此，我在函数中使用的参数是state（默认情况下为null，因为它不会自动分配变量）和action，它们将是发送到Reducer的数据

现在，我认为我们可以从Redux存储中实际创建和检索变量

我将为您提供执行此操作所需的函数和代码，因为我已经就此写了一篇文章。
因此，要将变量分配给全局状态变量（我称之为user），我需要使用Dispatch

import {useDispatch} from "react-redux";

然后，为了便于使用，我也将其指定为一个变量 让dispatch=usedpatch（）； 现在我可以用它来分配我的数据：

dispatch({
         type: "LoggedIn",
         payload: {
               name: user
         },
    });

如果为用户分配了字符串“Jeremy”，则redux存储状态user将如下所示：

user:{name:“Jeremy”}

也可以在不同的文件中使用此选项，您只需使用函数useSelector：

import {useDispatch, useSelector} from "react-redux";
const {user} = useSelector((state) => ({...state}));

这将从redux存储状态导入用户变量供您使用（redux存储中的任何值都将是变量user的值）。

---

感谢阅读，如果你被卡住了，请发邮件给我或在这里发表评论，我一定会尽力帮助你

我会尝试在这里回答你的问题，而不是评论。不过，我想提醒您，我对您的应用程序的完整内容并不完全熟悉。事实上，我也不是很精通航海。但是，粗略地看一下文档，您似乎检索到的参数不正确。 在您的代码中

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

但这些政策与这一方针不一致。具体而言，他们指出了获取参数的几种方法：

const { name } = this.props.navigation.state.params;

因此，您的代码如下所示：

const {inputValue} = this.props.navigation.state.params;

或

其中，

如果所寻求的参数未定义，则某些值

将是可依赖的值

---

这是一个很好的建议。

如何调用

navigateToCreatePasswordScreen

函数？除了它的声明之外，我没有看到更多的引用。很抱歉，我添加了调用它的按钮。我不确定你的

ContinueButton

组件是什么样子，但是你确定这个

onPress={（）=>this.navigateToCreatePasswordScreen（）}

不应该是

onClick={（）=>this.navigateToCreatePasswordScreen（）}

？使用onPress可以很好地将其导航到另一个页面，考虑到这是可行的，我认为

const {inputValue} = this.props.navigation.state.params;

const inputValue = this.props.navigation.getParam('inputValue', 'Some value');