在React onclick中添加列和行

import React, { useState } from 'react';

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

  // 其他组件代码...

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

export default MyComponent;

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;