React.js Bootstrap入力フィールドを追加または削除する

Question

私はReact.jsとreact-bootstrapを使ってWebアプリケーションを構築しています。私は、ユーザが経験している病気の症状をタイプすることができるフォームページを持っています。私は、ユーザーがテキストを入力できるようにして、以前に入力したテキストを削除するオプションも持たせたい。

JavaScriptで行われていることの一例はここにある： http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3

私は上記のリンクと同じ機能を持っていますが、リアクト使用したいと思います。ここでは、これまでのセクションで説明したコードはありますが、私は続ける最善の方法が不明です。​​が呼び出される

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> 

、私はページにInputフィールドを追加したい、とthis.removeSymptomField()が呼び出されたとき、私はページから既存のInputフィールドを削除します。

ありがとうございました！

Answer 1

あなたは状態の電流入力のリストを保持し、

this.state = { inputs: [] } 

コンポーネントのコンストラクタで

addSymptomFieldとremoveSymptomField

を呼び出すときには

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

そして、あなたのrenderInputs方法をレンダリングすることを修正することができますこのように見える可能性があります

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

はその後、単純にそんなにありがとう、addSymptomFieldとremoveSymptomField方法