React向表中添加新项

import React, { useState } from 'react';

const TableComponent = () => {
  const [data, setData] = useState([]);

  const handleFormSubmit = (e) => {
    e.preventDefault();
    // 获取表单中的输入值
    const newItem = {
      // 根据表单元素的name属性获取值
      name: e.target.elements.name.value,
      age: e.target.elements.age.value,
      // 其他表单字段...
    };

    // 将新项添加到数据源数组中
    setData([...data, newItem]);

    // 清空表单
    e.target.reset();
  };

  return (
    <div>
      <form onSubmit={handleFormSubmit}>
        <input type="text" name="name" placeholder="姓名" />
        <input type="number" name="age" placeholder="年龄" />
        {/* 其他表单字段... */}
        <button type="submit">添加</button>
      </form>

      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            {/* 其他表头... */}
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.age}</td>
              {/* 其他单元格... */}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default TableComponent;