Dinamik olarak eklenmiş girdilerden metin değerleri alma tepkisi

Question

Dinamik olarak giriş metin alanları oluşturdum ancak değerleri okuyabilmek ve bir diziye saklamak için bir yol bulamadım. i IncrementTableRow da

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; 

denilen eklemek yeni giriş alanı satırlar için ayrı bir bileşene sahip

aşağıdaki kodu bulabilirsiniz i IncrementTableRow aşağıda arayan hattın olduğunu çağırmak ana bileşeni vardır.

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

sizin kod örneği eksik görünüyor her oluşturulan metin alanı değerlerini okumak ve bir diziye depoladı gerekir - bu kadar burada satır sadece kısa cevabı değerleri eklemek bile yok :

onay tepki size

her satır için bir ref ekleyebilir https://facebook.github.io/react/docs/more-about-refs.html

ref

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

belki daha da iyi bir çözüm satırlara bir onChange dinleyicisi ekleyebilir ve

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