从动态添加的输入文本字段中获取值

Question

I have created dynamically generate input text-fields but unable to find a way to read and get the values and stored it to an array. please find the code below

i have separate component for add new input field rows called 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;

also, i have main component to call IncrementTableRow below is the calling line.

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 need to read each and every generated text field values and stored it to an array

Answer 1

your code example seems incomplete - you dont even add the values to your rows so here only a short answer:

check react refs https://facebook.github.io/react/docs/more-about-refs.html

you can add a ref to each row in your

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

maybe an even better solution would be to add an onChange listener to your rows and update the state of your parrent component

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