Javascript JS/ReactJS：如何获取表的所有输入值？

这是一个示例表数据：

const tableData = [
    ['one', 'two', 'three'],
    ['uno', 'dos', 'tres'],
    ['ichi', 'ni', 'san']
]

数据将按如下方式呈现：

render() {
    <Table>
        <Table.Body>
            {
                tableData.map((row, rowIndex) => {
                    return (
                        <Table.Row key={ rowIndex }>
                            {
                                row.map((cell, cellIndex) => {
                                    return (
                                        <Table.Cell key={ cellIndex }>
                                            <Input
                                                defaultValue={ cell }
                                                onChange={ this.tableChange }
                                            />
                                        </Table.Cell>
                                    )
                                })
                            }
                        </Table.Row>
                    )
                })
            }
        </Table.Body>
    </Table>
}

这就是我获取更新的当前元素值的方式。但是我需要得到完整的更新数组，就像输入数组一样

---

我会考虑使用键值，但也许我需要一些

数据

-属性？

这只是一个例子来说明您的情况，所以假设我们有

表

组件，它将只呈现上面的所有代码

桌子

类表扩展了React.Component{
构造函数（）{
超级（）；
this.onChange=this.onChange.bind（this）；
此.state={
表格数据：[
[‘一’、‘二’、‘三’]，
['uno'、'dos'、'tres']，
['ichi'，'ni'，'san']
]
};
}
renderRows（）{
const{tableData}=this.state；
返回tableData.map（（单元格，行索引）=>(
{this.renderCells（单元格，行索引）}
));
}
渲染单元格（单元格、行索引）{
返回单元格.map（（单元格，单元格索引）=>(
));
}
onChange（事件、单元格索引、行索引）{
this.state.tableData[rowIndex][cellIndex]=event.target.value；
const tableData=this.state.tableData；
log（'values:'，event.target.value，cellIndex，rowIndex）；
log（'tableData:'，tableData）；
this.setState（{tableData}）；
}
render（）{
返回(
{this.renderRows（）}
);
}
}

输入

函数输入（{onChange，cellIndex，rowIndex，defaultValue}）{
const onInputChange=事件=>{
onChange（事件、单元索引、行索引）；
};
返回(
);
}

传递元素的索引没有错。
正如您在

组件中所看到的，您可以传递

行索引

和

单元格索引

的引用，以便组件知道数组的哪个元素正在更新，然后在触发

onChange

事件时通知父级

---

下面是一个工作示例，请查看：

您是否可以控制

输入组件？还是图书馆？我完全可以控制。我可以更改所有内容。然后在
输入
组件中，您可以添加一个类似
索引
的道具，该道具显示值的实际位置，
，并将其返回到您的输入点击处理程序中
tableChange(event) {
    console.log(event.target.value)
}

class Table extends React.Component {
  constructor() {
    super();

    this.onChange = this.onChange.bind(this);
    this.state = {
      tableData: [
        ['one', 'two', 'three'],
        ['uno', 'dos', 'tres'],
        ['ichi', 'ni', 'san']
      ]
    };
  }

  renderRows() {
    const { tableData } = this.state;

    return tableData.map((cells, rowIndex) => (
      <tr key={ rowIndex }>
        {this.renderCells(cells, rowIndex)}
      </tr>
    ));
  }

  renderCells(cells, rowIndex) {
    return cells.map((cell, cellIndex) => (
      <td key={ cellIndex }>
        <Input
          cellIndex={cellIndex}
          rowIndex={rowIndex}
          defaultValue={cell}
          onChange={this.onChange}
        />
      </td>
    ));
  }

  onChange(event, cellIndex, rowIndex) {
    this.state.tableData[rowIndex][cellIndex] = event.target.value;
    const tableData = this.state.tableData;

    console.log('values:', event.target.value, cellIndex, rowIndex);
    console.log('tableData:', tableData);

    this.setState({ tableData });
  }

  render() {
    return (
      <table>
        <tbody>
          {this.renderRows()}
        </tbody>
      </table>
    );
  }
}

function Input({ onChange, cellIndex, rowIndex, defaultValue }) {
  const onInputChange = event => {
    onChange(event, cellIndex, rowIndex);
  };

  return (
    <input
      type="text"
      value={defaultValue}
      onChange={onInputChange}
    />
  );
}