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

React get values from dynamically added inputs text fields

本文关键字：字段 获取 文本 输入 动态 添加 React      更新时间：2023-10-08

我创建了动态生成输入文本字段，但无法找到读取和获取值的方法，并将其存储到数组中。请在下面找到代码

我有一个单独的组件，用于添加名为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>
    );
  }

}

我需要读取每个生成的文本字段值，并将其存储到数组

您的代码示例似乎不完整——您甚至没有将值添加到行中所以这里只有一个简短的答案：

检查反应参考https://facebook.github.io/react/docs/more-about-refs.html

您可以为中的每一行添加一个引用

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

也许一个更好的解决方案是在您的行中添加一个onChange侦听器，并更新您的parrent组件的状态

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