在React onclick中添加列和行

在React中，可以通过onClick事件来添加列和行。具体实现方式如下：

首先，在React组件中定义一个状态变量，用于存储表格的数据。例如，可以使用useState钩子函数来创建一个名为tableData的状态变量：

import React, { useState } from 'react';

function MyComponent() {
  const [tableData, setTableData] = useState([]);

  // 其他组件代码...

  return (
    // JSX代码...
  );
}

export default MyComponent;

在JSX代码中，创建一个表格，并使用map函数遍历tableData数组，渲染表格的行和列。同时，为添加列和行的按钮添加onClick事件处理函数。

import React, { useState } from 'react';

function MyComponent() {
  const [tableData, setTableData] = useState([]);

  const addColumn = () => {
    // 创建新的表格数据，包含新增的列
    const newTableData = tableData.map(row => [...row, '']);

    // 更新表格数据
    setTableData(newTableData);
  };

  const addRow = () => {
    // 创建新的表格数据，包含新增的行
    const newRow = Array(tableData[0].length).fill('');
    const newTableData = [...tableData, newRow];

    // 更新表格数据
    setTableData(newTableData);
  };

  return (
    <div>
      <table>
        <tbody>
          {tableData.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {row.map((cell, cellIndex) => (
                <td key={cellIndex}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      <button onClick={addColumn}>添加列</button>
      <button onClick={addRow}>添加行</button>
    </div>
  );
}

export default MyComponent;

在上述代码中，addColumn函数用于添加列，它会遍历tableData数组，并为每一行添加一个空字符串。然后，通过setTableData更新表格数据。

同样地，addRow函数用于添加行，它会创建一个新的空行，并将其添加到tableData数组的末尾。

通过在JSX代码中使用map函数，可以动态渲染表格的行和列。每个单元格都使用唯一的key属性来标识。

这样，当用户点击"添加列"按钮时，会触发addColumn函数，从而在表格中添加一列。当用户点击"添加行"按钮时，会触发addRow函数，从而在表格中添加一行。

请注意，上述代码仅为示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。