Reactjs：ボタンをクリックしてコンポーネントを追加する

Question

ボタンをクリックしてコンポーネントを追加しようとしています。続き

はその

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

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

のためのフィドルは、ここで私は、個々のコンポーネントIndividualTicketInputを使用しています、それは単一成分チケットコンポーネント内にそれを行うことは可能ですか？

Answer 1

はい、できます。

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

Answer 2

あなたは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}); 
}