Javascript 如何在react中的两个页面之间传递输入数据

我一直在学习react，并尝试从一个页面到另一个页面获取用户输入。我已经尝试过一些不同的东西，比如裁判、道具和重做，但我就是想不出来。我的目标是，当数据插入文本框并单击submit时，我可以在第二页显示这些条目的列表

这是输入页面

import React, { Component } from "react";

class New extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert(this.state.value + ' successfully created');
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label for="tournyName">Tournament name:</label>
        <input type="text" class="form-control" id="tournyName" value= {this.state.value} onChange={this.handleChange}></input>
        <button type="submit" value="Submit" class="btn btn-primary">Create tournament</button>
      </form>
    );
  }
}

export default New;

import React，{Component}来自“React”；
类新扩展组件{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
警报（this.state.value+“已成功创建”）；
event.preventDefault（）；
}
render（）{
返回(
比赛名称：
创建锦标赛
);
}
}
导出新的默认值；

目标是在此列表中包含用户输入

import React, { Component } from "react";

class Tournaments extends Component {
  render() {
    return (
      <h2>List of tournaments:</h2><br></br>
      <ul>
        <li>User created tournament name here</li>
      </ul>
    );
  }
}

export default Tournaments;

import React，{Component}来自“React”；
类锦标赛扩展组件{
render（）{
返回(
锦标赛列表：



用户在此处创建了比赛名称

);
}
}
导出默认锦标赛；

---

感谢您提前提供的帮助。

简单。从调用submit操作的组件以数组形式传递数据，并使用常量在要呈现数据的组件中迭代映射。

React中没有“页面”。您可以将数据设置为道具并在“新建”组件中传递给我的实例化“锦标赛”，也可以使用Redux。