Question

我想点击按钮添加一个组件。

以下是那个小提琴

 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});
}

Answer 2

是的，你可以。

您可以在Tickets组件中实现一个函数，该函数返回故障单UI的html元素。但是，我认为这不是最好的做法。因为，您应该将每个UI组件项划分为React Component。

https://jsfiddle.net/rwnvt8vs/

ticket: function(ticket = {name: '', quantity: '', price: null}){
    return (
    <ul>
        <li>
          <label>Ticket Name</label>
          <input className="ticket-name" type="text" placeholder="E.g. General Admission" value={ticket.name} />
        </li>
        <li>
          <label>Quantity Available</label>
          <input className="quantity" type="number" placeholder="100" value={ticket.quantity} />
        </li>
          <li>
            <label>Price</label>
            <input className="price" type="number" placeholder="25.00" value={ticket.price} />
          </li>
        <li>
          <button type="button" className="delete-ticket" onClick={this.deleteTicket}><i className="fa fa-trash-o delete-ticket"></i></button>
        </li>
      </ul>
  );
},

onClick: function() {
    var newTicket = this.ticket();
    var tickets = this.state.tickets.push(newTicket);
    this.setState({tickets: tickets});
 },

Reactjs：点击按钮添加组件

2 个答案: