その行のonClickで入力データを取得する方法 - reactjs

Question

reactjsとJavaScriptにはまだまだ新しいので、これは簡単かもしれませんが、オンラインで検索する際の例はまだありません。

入力ボックスとonClick/submitを持つ各行を持つテーブルを作成して、その行に入力された入力量を関数に送信するか、またはその行の入力データにアクセスするための何らかの方法で送信します。行は、状態で保存された配列から構築されます。

ここには、私が現在いる場所のストリップコードがあります。これは、biweeklyPaysとsaveChangesを渡す上位レベルのコンテナによって呼び出されるテーブルだけです。

Answer 1

あなたが作成したものは、入力やその他のフォームの編集などのステートフルな「解決策」には定義できない純粋なステートレスコンポーネントです。

入力値が変更された場合、コンポーネントをstateのクラスに変換して状態を更新する必要があります。

ステップ：

1. クラスに変換（https://facebook.github.io/react/docs/state-and-lifecycle.html#converting-a-function-to-a-class）
2. 入力に実際の値をレンダリング - ><input ... value={this.state.values[i]} .../>
3. 入力の変化のためのレジスタ - > this.updateInput（I、E）} `
4. ボタンが親にローカル状態を送信しなければならない - ><button ... onClick={() => this.props.saveChanges(b, this.state.values[i])

（iはあなたの繰り返しの指標である、あなたは、例えば、_.forEach(biweeklyPays, (b, i) => { .... }のためにあなたのforを変更することができます）

私はあなたがこれを達成するためにあなたは、このようなあなたのコンポーネントを初期化する必要があり、stateで入力値の配列を保つことを想定：

getInitialState: function() { 
    return { values: [] }; 
} 

上記のonUpdateRowValue(i, e)は、i状態の第1要素を更新するに過ぎないものとします。

onUpdateRowValue: function(i, e) { 
    var values = this.values.slice(0); 
    values[i] = e.target.value 
    this.setState({values: values}); 
}