2

我有两个数组，1 列和 2 行。我想按照代码中所示动态地将行数组数据添加到列数组中。暂时我在这些数组中采用了硬编码值，我有一个添加按钮。实际上我想渲染具有下拉按钮的 n*n 矩阵。

我在添加按钮上定义了一种方法，并使用 for 循环将列数组推送到行数组。

import React, { Component } from "react";
import './Table.css';


export class Table extends Component {
    constructor(props) {
        super(props)
        this.state = {
            columns: ['state 1', 'state 2', 'state 3', 'state 4', 'state 5', ''],
            emptyheader: [''],
            rows: [
                ['state 1', 'state 2', 'state 3', 'state 4', '', ''],
                ['state 2', 'state 2', 'state 3', 'state 4', ' ', ''],
                ['state 3', 'state 2', 'state 3', 'state 4', ' ', ''],
                ['state 4', 'state 2', 'state 3', 'state 4', ' ', ''],
                ['state 5', 'state 2', 'state 3', 'state 4', ' ', '']
            ],

            selectedTeam: ''
        }
        this.handleChange = this.handleChange.bind(this)
    }

    render() {

        return (
            <div>

                <table align="center">
                    <tbody>
                        <tr>
                            {this.state.emptyheader.map((emptyheader, i) =>
                                <td >{emptyheader}</td>
                            )}
                            {this.state.columns.map((column, i) =>
                                <td >{column}</td>
                            )}
                        </tr>

                        {this.state.rows.map((row, i) =>
                            <tr key={i}>
                                {row.map((cell, i) =>
                                    (i < 1) ? (
                                        <td scope="row" key={i}>{cell}</td>
                                    ) : (
                                            <td>
                                                <select>
                                                    <option value="forward">Forward</option>
                                                    <option value="reverse">Reverse</option>
                                                    <option value="NA">NA</option>
                                                </select>
                                            </td>
                                        )
                                )}
                            </tr>
                        )}
                    </tbody>
                </table>


            </div>
        );
    }
}

export default Table;

我想渲染 n*n 矩阵

4

2 回答 2

2

你能展示你的handleChange方法吗

我认为应该是这样的

this.handleChange = (e) => {
    let { rows } = this.state;
    rows.push(newElement);
    this.setState(rows);
}
于 2019-09-13T05:25:04.970 回答
0

根据问题，您要尝试做什么并不是很明显，但是如果您想动态添加行和列，请尝试以下代码段。特别看一下addColumn和addRow方法。

class Table extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      columns: ['state 1', 'state 2', 'state 3', 'state 4', 'state 5', ''],
      emptyheader: [''],
      rows: [
        ['state 1', 'state 2', 'state 3', 'state 4', '', ''],
        ['state 2', 'state 2', 'state 3', 'state 4', ' ', ''],
        ['state 3', 'state 2', 'state 3', 'state 4', ' ', ''],
        ['state 4', 'state 2', 'state 3', 'state 4', ' ', ''],
        ['state 5', 'state 2', 'state 3', 'state 4', ' ', '']
      ],

      selectedTeam: ''
    }
    this.handleChange = this.handleChange.bind(this)
    this.addColumn = this.addColumn.bind(this)
    this.addRow = this.addRow.bind(this)
  }
  
  handleChange() {}
  
  addColumn() {
    const { columns, rows } = this.state;
    columns.push('');
    this.setState({ columns });
  }
  
  addRow() {
    const { rows } = this.state;
    rows.push([]);
    this.setState({ rows });
  }

  render() {
    const { rows, columns } = this.state;
    const displayRows = rows.map(row => [...row, ...new Array(columns.length - row.length)]);

    return (
      <div>
        <table align="center">
          <tbody>
            <tr>
              {this.state.emptyheader.map((emptyheader, i) =>
                <td >{emptyheader}</td>
              )}
              {this.state.columns.map((column, i) =>
                <td >{column}</td>
              )}
            </tr>

            {displayRows.map((row, i) =>
              <tr key={i}>
                {row.map((cell, j) =>
                  (j < 1) ? (
                    <td scope="row" key={j}>{cell}</td>
                  ) : (
                      <td>
                        <select disabled={i === j - 1}>
                          <option value="forward">Forward</option>
                          <option value="reverse">Reverse</option>
                          <option value="NA">NA</option>
                        </select>
                      </td>
                    )
                )}
              </tr>
            )}
          </tbody>
        </table>
        
        <button onClick={this.addColumn}>add column</button>
        <button onClick={this.addRow}>add row</button>

      </div>
    );
  }
}

ReactDOM.render(
  <Table />,
  document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

编辑：更新片段以反映@GS7 的评论。

编辑：更新以禁用对角下拉列表

于 2019-09-13T06:01:49.510 回答