動的に追加された入力テキストフィールドから値を取得する

Question

入力テキストフィールドを動的に生成しましたが、値を読み込んで取得する方法が見つからず、配列に格納できませんでした。

以下のコードを見つけてください私は、新しい入力フィールドの行を追加するための独立したコンポーネントを持っても、私は以下のは、呼び出し元のラインであるIncrementTableRowを呼び出すための主要なコンポーネントを持っている

import React, {PropTypes} from 'react'; 

class IncrementTableRow extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <tr> 
     <th scope="row">{this.props.index}</th> 
     <td><input type="text" className="form-control" ref={"firstValue"+this.props.index} placeholder=""/></td> 
     <td><input type="text" className="form-control" ref={"secondValue"+this.props.index} placeholder=""/></td> 
     </tr> 
    ); 
    } 
} 

export default IncrementTableRow; 

IncrementTableRowと呼ばれます。

export default class SuggestInterestProductDetails extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     rows: [] 
    }; 
    this.AddRow = this.AddRow.bind(this); 
    } 

AddRow() { 
    this.setState({ 
     rows: [{val: 5}, ...this.state.rows] 
    }); 
    } 

    render() { 
    let rows = this.state.rows.map(row => { 
     return <Row /> 
    }); 

    return (
    <div> 
     <button onClick={this.AddRow}>Add Row</button> 
     <table> 
     {rows} 
     </table> 
    </div> 
    ); 
    } 


} 

iは

Answer 1

あなたのコードの例が不完全思わ一人ひとり生成されたテキストフィールドの値を読み込み、配列にそれを保存する必要があります - あなたがそうここにあなたの行 だけ短い答えに値を追加してもいけません：

チェックが反応し、あなたの

の各行に参照を追加することができます https://facebook.github.io/react/docs/more-about-refs.html

レフリー

let rows = this.state.rows.map(row => { 
    return <Row /> 
}); 

は多分よりよい解決策は、あなたの行にのonChangeリスナーを追加し、

let rows = this.state.rows.map((row,i) => { 
    return <Row ref={'row-'+i} onChange={(event) => this.myListener(event,i)} /> 
});