react : Add component on click of button

Question

我试图在点击按钮时添加一个组件。

下面是 fiddle

https://jsfiddle.net/rzv6Lrjh/92/

 render: function() {
   return (
     <div>
       <IndividualTicketInput />
       {this.state.tickets}
       <CreateTicket createTicket={this.onClick} />
     </div>
   );
  }
});

这里我使用的是单个组件 IndividualTicketInput ，是否可以在单个组件 Tickets 组件中使用它？

Answer 1

您可以在状态中存储一组票证，并在每次单击 CreateTicket 按钮时生成一个新的票证对象。将新票存储在状态中并迭代它们，将每张票渲染到 dom。组件每次都会重新渲染 setState被调用，用新的 <Ticket> 更新 dom组件。

 state = { tickets: [] }

 render: function() {
   return (
     <div>
       <IndividualTicketInput />
       {this.state.tickets}
       <CreateTicket createTicket={this.onClick} />
       {this.renderTickets()}
     </div>
   );
  }
});

renderTickets() {
   return this.state.tickets.map(ticket => {
      return <Ticket key={ticket.id} ticket={ticket} />;
   });
}

onClick = () => {
   let newTicket = { ... };
   let tickets = this.state.tickets.unshift(newTicket);
   this.setState({tickets});
}