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

Question

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

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

我该如何做到这一点？我对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

这里有一个非常粗糙的例子：https://jsfiddle.net/df4s9ey8/