获取表React中的行输入的值

import React, { useState } from 'react';

const TableComponent = () => {
  const [tableData, setTableData] = useState([]);

  const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const newData = [...tableData];
    newData[index] = { ...newData[index], [name]: value };
    setTableData(newData);
  };

  const handleSubmit = () => {
    // 在这里可以访问tableData来获取表格行输入的值
    console.log(tableData);
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {tableData.map((row, index) => (
            <tr key={index}>
              <td>
                <input
                  type="text"
                  name="name"
                  value={row.name || ''}
                  onChange={(e) => handleInputChange(e, index)}
                />
              </td>
              <td>
                <input
                  type="text"
                  name="age"
                  value={row.age || ''}
                  onChange={(e) => handleInputChange(e, index)}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default TableComponent;