在點擊時複製兩個輸入元素，但忽略單個元素

Question

所以，我有這個組件呈現一個具有3個輸入字段的「單個項目」。我在組件的底部創建了一個按鈕，它可以在單擊時複製和添加單個項目。點擊另一個按鈕時，我需要一些幫助來渲染前兩個輸入，而不需要最終的價格輸入。我在組件的底部有一個按鈕className='add-donation'。在React中做這件事的最好方法是什麼？

我一直在創建一個組件，只是爲了某些價格領域，但沒有運氣得到這個工作。我還玩弄了每個陳述，檢查每個價格輸入的狀況，看看價格是多少。如果它是0.00，則隱藏。顯然，這樣我會遇到一些問題，不想這樣做。

var AddItem = React.createClass({ 
    getInitialState: function() { 
    return {elements: [{name: '', quantity: '', price: ''}]}; 
    }, 
    nameChange: function(index, e) { 
    var elements = this.state.elements; 
    elements[index].name = e.target.value; 
    this.setState({elements: elements}); 
    }, 
    quantityChange: function(index, e) { 
    var elements = this.state.elements; 
    elements[index].quantity = e.target.value; 
    this.setState({elements: elements}); 
    }, 
    priceChange: function(index, e) { 
    var elements = this.state.elements; 
    elements[index].price = e.target.value; 
    this.setState({elements: elements}); 
    }, 
    createNewItem: function(e) { 
    var elements = this.state.elements; 
    elements.push({name: '', quantity: '', price: ''}); 
    this.setState({elements: elements}); 
    }, 
    deleteItem: function(e) { 
    var elements = this.state.elements; 
    elements.pop({name: '', quantity: '', price: ''}); 
    this.setState({elements:elements}); 
    }, 
    render: function() { 
    return (
     <div className="item-section"> 
      {this.state.elements.map((element, index) => 
      <div className="individual-item" key={index}> 
      <ul> 
       <li> 
       <label>Ticket Name</label> 
       <input className="ticket-name" type="text" value={element.name} onChange={this.nameChange.bind(this, index)} /> 
       </li> 
       <li> 
       <label>Quantity Available</label> 
       <input className="quantity" type="number" placeholder="100" value={element.quantity} onChange={this.quantityChange.bind(this, index)} /> 
       </li> 
       <li> 
       <label>Price</label> 
       <input className="price" type="number" placeholder="25.00" value={element.price} onChange={this.priceChange.bind(this, index)} /> 
       </li> 
       <li> 
       <button type="button" className="delete-item" onClick={this.deleteTicket}><i className="fa fa-trash-o delete-item"></i></button> 
       </li> 
      </ul> 
      </div> 
     )} 
      <button type="button" className="add-another-item" onClick={this.createNewItem}>+ Add another ticket</button> 
      <button type="button" className="add-donation" onClick={this.createDonation}>+ Add donation</button> 
     </div> 
    ); 
    } 
}); 

Answer 1

當您通過單擊按鈕添加新項目時，添加一個指示您是否要顯示額外輸入字段的道具。

<button onClick={() => this.createNewItem({ type: 'donation' }) }>+ Add donation</button> 

然後在你的函數：

createNewItem: function(options) { 
    var elements = this.state.elements; 
    elements.push({name: '', quantity: '', price: '', type: options.type}); 
    this.setState({elements: elements}); 
} 

然後在你的渲染功能，只顯示輸入字段，如果該類型不是donation：

render: function() { 
    return (
    <div className="item-section"> 
     {this.state.elements.map((element, index) => 
     <div className="individual-item" key={index}> 
     <ul> 
      <li>...name...</li> 
      <li>...quantity...</li> 

      { element.type !== 'donation' && 
      <li>...price...</li> 
      } 

      ... 

     </ul> 
     </div> 
    )} 

     ...buttons.. 

    </div> 
) 
}