我想以以下格式动态添加数组中的元素

Question

我有两个数组，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>

export default Table;

我想渲染 n*n 矩阵

Answer 1

你能展示你的handleChange方法吗我认为它应该是这样的this.handleChange = (e) => {&nbsp; &nbsp; let { rows } = this.state;&nbsp; &nbsp; rows.push(newElement);&nbsp; &nbsp; this.setState(rows);}