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

Question

我已经在整个谷歌上查找了我的答案（哈哈）。 我想要达到的目标：

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

我如何实现这一目标？我是 reactjs 的新手。

我想过多种解决方案：

1. 将输入数据存储到外部 JSON（这看起来相当复杂）
2. 将数据作为道具传递，但我不知道该怎么做

到目前为止谢谢！

Answer 1

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

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

如果是这种情况，您的 FirstScreen 组件可以接受一个名为 onSubmit 之类的道具——您说您已经将来自 FirstScreen 的输入值存储在状态中，所以当 FirstScreen 完成时，您可以调用this.props.onSubmit(this.state)，它会将状态发送到你的父组件，只要你在父组件中定义了一个回调函数：

{this.state.showFirstScreen && <FirstScreen onSubmit={this.onFirstScreenSubmit} />}

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

[edit] 这是一个非常粗略的例子：https://jsfiddle.net/df4s9ey8/