在reactjs应用程序中存储动态组件的状态

Question

您好我有一个反应组件RegisterWindow.js动态子元素Category.js。注册窗口有3个步骤的进度条ProgressBar.js。当您单击上一步时，Category.js将失去其状态。在这种情况下维持状态的最佳方法是什么。代码如下：

Step1（门票）

第2步（与会者）

您可以在门票图片中看到我选择了2张门票。当我使用进度条链接从Attendee屏幕返回Tickets时，我松开了状态，并且没有票证变为0.每个票证行都是单独的reactjs组件并且是动态创建的。

Answer 1

当我们在组件之间存在父子关系（单向数据流）时，这是一种非常常见的模式。请阅读此内容以获取更多信息 - here

您可以将状态（存储票证）提升到父组件（可能是执行步进器的位置）。然后，您可以在步骤更改时将相同的数据传递给每个子视图。

希望这有帮助！

Answer 2

你想沿着这些方向做点什么：

  

RegisterWindow.js

class RegisterWindow extends React.Component {
  constructor() {
    super();
    this.state = {
        ticketQty : 0,
        attendees : [],
    };
  }
  render() {
    return (
      <div>
            <ProgressBar />
            <Tickets updateTickets={this.updateTickets} />
            <Attendees  ticketQty={this.state.ticketQty} addAttendees={this.addAttendees} />
            <Confirmation />
      </div>
    );
  }
}

  

Tickets.js

class Tickets extends React.Component {

  render() {
    return (
      <div>
         //All the UI elements
        <button onClick={this.props.updateTickets}> Add Ticket</button>
      </div>
    );
  }
}

基本上，您将在updateTickets文件中定义addAttendees和RegisterWindow函数。

这些将作为道具传递给各个组件。这些组件将访问道具并相应地更新数据。

TLDR：数据和函数将从RegisterWindow组件流向各个组件。