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

问题描述

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

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

我该如何实现？我是ReactJS的新手。

我考虑过多种解决方案：

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

到目前为止谢谢！

解决方法

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

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

在这种情况下，您的FirstScreen组件可以接受名为onSubmit之类的prop －您说您已经存储了FirstScreen的输入值，因此当{ {1}}完成后，您可以调用FirstScreen，只要您在父组件中定义了一个回调函数，它将把状态发送到您的父组件：

this.props.onSubmit(this.state)

然后，您可以将第一个屏幕的状态保存到父组件的状态中，并将该状态的该部分向下传递到{this.state.showFirstScreen && <FirstScreen onSubmit={this.onFirstScreenSubmit} />}

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

input javascript reactjs reactjs