React.js Önyükleme Girdi Alanları Ekle veya Kaldır

Question

React.js ve react-bootstrap kullanarak bir web uygulaması yapıyorum. Kullanıcının, yaşadıkları bir hastalığın belirtilerini yazabileceği bir form sayfam var. Kullanıcının metin yazabilmesini ve önceden yazılan metni kaldırma seçeneğine sahip olmasını istiyorum.

JavaScript yapılıyor bunun bir örneği buradadır: http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3

Ben yukarıdaki bağlantıyı aynı özelliğe sahip fakat Tepki kullanarak istiyorum. İşte bölüm için şimdiye kadar sahip olduğum kod, ama devam etmenin en iyi yolundan emin değilim. this.addSymptomField() çağrıldığında

var closeButton = <Button onClick={this.removeSymptomField()}>Close</Button>; 

<Input type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/> 

<Button onClick={this.addSymptomField()}>Click to add a new symptom.</Button> 

, ben sayfasına bir Input alan eklemek istiyoruz ve this.removeSymptomField() çağrıldığında, ben sayfadan mevcut Input alanı kaldırmak istiyoruz.

Çok teşekkür ederim!

Eyaletteki cari girişlerin bir listesini tutmak ve bileşen Yapıcıda addSymptomField ve removeSymptomField

çağrılırken

this.state = { inputs: [] } 

yılında

<div className="inputs"> 
    {this.renderInputs()} 
</div> 

Ve renderInputs yöntemi işlemek olduğunu değiştirebilir

Answer 1

bu gibi görünebilir

renderInputs() { 
    return this.state.inputs.map((input, index) => <Input key={index} type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/>) 
} 

Sonra sadece eklemek veya addSymptomField ve removeSymptomField yöntemleri