流星のクリックで要素を作成

Question

私は流星と反応を使用しています。私は本当に単純な目標を持っていますが、私は多くを試してきましたが、自分でそれを解決することはできません。私はあなたに以下の私のattempsを表示します。

私は成分のためのフォームを作成したいと思います。最初の瞬間に、1つの入力（1つの成分のみ）と2つのボタン：Add IngredientとSubmitがあります。

class IngredientForm extends Component { 
    render() { 
    return(

     <form onSubmit={this.handleSubmit.bind(this)}> 

     <input type="text"/> 

     { this.renderOtherInputs() } 

     <input type="button" value="Add Ingredient" onClick={this.addIngredient.bind(this)}> 

     <input type="submit" value="Submit Form"> 

     </form> 
    ); 
    } 
} 

[送信]をクリックすると、すべてのデータがコレクションに送信されます。 Add Ingredientをクリックすると、別のテキスト入力が表示されます（renderOtherInputs（）の場所に表示されます）。

私が知っている流星はです。 - 何かを直接レンダリングする必要はありません。私は反応性データ記憶装置の上にすべきです。

は、と私はチュートリアルから何かをレンダリングするための唯一の方法を知っている - 私は（それは常に反応性のあるコレクション、に基づいていた）の配列を持っているし、その配列の各要素のために何かをレンダリングする必要があります。

の要素数=追加入力数です。それはローカルなのでコレクションを使用することはできません。代わりに反応型バリアを使用しましょう。

numOfIngredients = new ReactiveVar([]); 

とするとき、私はボタンを追加]をクリックします - 新しい要素がこの配列にプッシュする必要があります。

addIngredient(e) { 
    e.preventDefault(); 
    let newNumOfIngredients = numOfIngredients.get(); 
    newNumOfIngredients.push('lalal'); 
    numOfIngredients.set(newNumOfIngredients); 
} 

そして私は私が持っているどのように多くの要素の前提に（追加入力をレンダリングする必要があり、すべての後に配列）：

renderOtherInputs() { 
    return numOfIngredients.get().map((elem) => { 
    return(
     <input type="text"/> 
    ); 
    } 
} 

アイデアがある：私は追加ボタンをクリックすると、新しい要素がReactiveVar（newNumOfIngredients）にプッシュされます。 htmlコードでは、this.renderOtherInputs（）を呼び出します。これは、ReactiveVar（newNumOfIngredients）にある要素の数だけhtmlを返します。 newNumOfIngredientsはデータを反応的に格納するためのものです。要素をpushすると、それに依存するすべてのものが再レンダリングされます。なぜ私はそれが動作していないとどのようにこれを行うにはわからない。

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

Answer 1

最後に私は解決策を得ました。しかし、なぜあなたたちはウェブで初心者を助けないのですか？経験豊かな開発者にとっては本当に簡単な質問です。私はその流星を読んで特に強力なコミュニティを持っていますが、...

答えは：状態を使うべきです！

最初のコンポーネントを反応させるのコンストラクタで私達の状態オブジェクトを定義してみましょう：

constructor(props) { 
    super(props); 
    this.state = { 
    inputs: [], 
    } 
} 

その後、我々は我々の状態の基礎となる入力をレンダリングする機能を必要としています。入力：

renderOtherInputs() { 
    return this.state.inputs.map((each, index) => { 
    return (
     <input key={ index } type="text" /> 
    ); 
    }); 
} 

と入力を追加する：

addInput(e) { 
    e.preventDefault(); 
    var temp = this.state.inputs; 
    temp.push('no matter'); 
    this.setState({ 
    inputs: temp, 
    }); 
} 

P.S.