表

Question

这是一个示例表数据：

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>
}

现在，我需要在onChange元素的Input上获取更新的数据集。

tableChange(event) {
    console.log(event.target.value)
}

这是我获取更新的当前元素值的方法。但是我需要获得完整的更新数组 - 比如输入数组。

我会考虑使用键值，但也许我需要一些data - 属性？

Answer 1

这只是一个涵盖您案例的示例，所以我们假设Table 将只呈现上面所有代码的组件

表

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}
    />
  );
}

传递元素的索引没有错正如您在<Input />组件中所看到的，您可以传递rowIndex和cellIndex的引用，以便组件知道正在更新阵列的哪个元素，然后在将其通知父组件时<{1}}事件已触发。

以下是一个有效的示例，请查看：https://codepen.io/anon/pen/awjgKb?editors=0010

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

1 个答案:

表

输入