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

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

我在add按钮上定义了一个方法，并使用for循环将columns数组推送到rows数组

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;

import React，{Component}来自“React”；
导入“/Table.css”；
导出类表扩展组件{
建造师（道具）{
超级（道具）
此.state={
列：[“州1”、“州2”、“州3”、“州4”、“州5”、“州]，
空标题：['']，
行：[
['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'、'
],
已选择的团队：“”
}
this.handleChange=this.handleChange.bind（this）
}
render（）{
返回(
{this.state.emptyheader.map（（emptyheader，i）=>
{emptyheader}
)}
{this.state.columns.map（（column，i）=>
{column}
)}
{this.state.rows.map（（row，i）=>
{row.map（（单元格，i）=>
（i<1）(
{cell}
) : (
向前地
逆转
NA
)
)}
)}
);
}
}
导出默认表；

---

我想渲染n*n矩阵

你能展示你的

handleChange

方法吗

我想应该是这样的

this.handleChange = (e) => {
    let { rows } = this.state;
    rows.push(newElement);
    this.setState(rows);
}

---

根据这个问题，您试图做什么并不十分明显，但是如果您想动态添加行和列，请尝试以下代码段。特别是查看

addColumn

和

addRow

方法

类表扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
列：[“州1”、“州2”、“州3”、“州4”、“州5”、“州]，
空标题：['']，
行：[
['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'、'
],
已选择的团队：“”
}
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；
列。推送（“”）；
this.setState（{columns}）；
}
addRow（）{
const{rows}=this.state；
行。推送（[]）；
this.setState（{rows}）；
}
render（）{
const{rows，columns}=this.state；
constdisplayRows=rows.map（row=>[…row，…新数组（columns.length-row.length）]）；
返回(
{this.state.emptyheader.map（（emptyheader，i）=>
{emptyheader}
)}
{this.state.columns.map（（column，i）=>
{column}
)}
{displayRows.map（（行，i）=>
{row.map（（单元格，j）=>
（j<1）(
{cell}
) : (
向前地
逆转
NA
)
)}
)}
添加列
添加行
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);

您能否添加codesandbox示例，我们可以在其中查看并修复它？因为上面的代码没有显示
handleChange
。如何仅使用列数组来渲染n*n矩阵？假设我将另一个状态推送到列数组，即状态6，那么应该添加新行和新列吗？如何实现这一点？您的意思是不更改
行的状态？如果是这样，您可以在
render
中计算附加值。是而不更改行的状态。但是这个行数组中的值不是数字，这些是字符串值，我将通过道具获得这个数组。基于这个数组，我想以n*n的形式呈现矩阵？我已经更新了片段，以在render方法中计算
displayRows
。希望能有帮助。我还有一个问题：我想禁用对角线下拉按钮。可能吗？我试过了，但找不到解决办法。如果你给出解决办法，那将非常有帮助。