通过单击按钮向react表添加行

import React, { useState } from 'react';

function TableWithAddRow() {
  // 初始状态为空数组
  const [rows, setRows] = useState([]);

  // 添加新行的函数
  const addRow = () => {
    const newRow = { id: Date.now(), name: 'New Item' }; // 创建新行对象
    setRows([...rows, newRow]); // 更新状态，添加新行
  };

  return (
    <div>
      <button onClick={addRow}>Add Row</button>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {rows.map(row => (
            <tr key={row.id}>
              <td>{row.id}</td>
              <td>{row.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default TableWithAddRow;