Javascript 将输入数据传递到下一个屏幕/组件

我已经在整个谷歌上找到了我的答案（哈哈）。 我正在努力实现的目标：

我的第一个屏幕是一个带有一些输入字段的表单，这些字段将输入存储到状态。 通过单击“提交”，用户将进入下一页/屏幕，其中应显示上一个输入。我只想将输入数据显示为p标记，不再显示为输入标记

我如何做到这一点？我是个新手

我考虑过多种解决方案：

将输入数据存储到外部JSON（这似乎相当复杂）

将数据作为道具传递，但我不知道该怎么做

---

谢谢你

我将假设您的第二个屏幕与第一个屏幕具有相同的父组件，如下所示：

render() {
    return (
        <div>
            {this.state.showFirstScreen && <FirstScreen />}
            {this.state.showSecondcreen && <Secondcreen />}
        </div>
    )
}

然后，您可以将第一个屏幕的状态保存到父组件的状态中，并将该部分状态传递到

SecondScreen

---

[编辑]这里有一个非常粗糙的例子：

下一个“屏幕”是否是一个全新的页面？或者这都是一个页面的一部分，并且在什么时候启动“下一个屏幕”？你的第二个屏幕与第一个屏幕共享相同的父组件吗？我在我的帖子中为你举了一个非常粗糙的例子：谢谢你的帮助！我理解你解决问题的方式。但不幸的是，这两个组件没有相同的父组件。屏幕的开关通过路由器工作。还有其他解决方法吗？您可以使用诸如Redux、React-Context之类的全局状态处理程序，或者如果您真的厚颜无耻，想抛开警告，只需执行

window即可，然后，当你到达屏幕2时，你可以阅读
窗口。屏幕1的状态并用它做你想做的事情。另外，你还可以在使用路由器的环境下，通过道具来了解如何传递状态。这也有可能再次发生！我找到了解决这个问题的办法。我按照你的建议使用路由器。非常感谢你！
{this.state.showFirstScreen && <FirstScreen onSubmit={this.onFirstScreenSubmit} />}