Reactjs：點擊按鈕添加組件

以下是該

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

這裏我使用的各個組件IndividualTicketInput的小提琴，是有可能做到這一點單組分門票組件內？

來源

2017-06-15 asdfdefsad

這是你想要的嗎？ https://jsfiddle.net/mayankshukla5031/07v7qfzo/我認爲你不需要爲按鈕創建一個單獨的組件，而不是在'state'中推入新的元素，只需要統計需要創建的子組件的數量。然後使用循環創建等於no的子組件。 –

是的，你可以。

您可以在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}); 
},

來源

2017-06-15 12:51:16

而不是強制更新，最好使用'this.setState'。這是因爲setState無論如何都會重新渲染，並且還會渲染渲染。 –

@DominicTobias我完全同意你的看法，但我只是重構了答案的必要部分。 –

你可以存儲在狀態門票的陣列，並生成一個新的票據對象單擊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}); 
}

來源

2017-06-15 12:52:14 andrewhl

Reactjs：點擊按鈕添加組件

回答

相關問題