reactjs中表中的可编辑字段

import React, { useState } from 'react';

const EditableTable = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Bob', age: 35 }
  ]);

  const handleNameChange = (id, event) => {
    const newData = data.map(item => {
      if (item.id === id) {
        return { ...item, name: event.target.value };
      }
      return item;
    });
    setData(newData);
  };

  const handleAgeChange = (id, event) => {
    const newData = data.map(item => {
      if (item.id === id) {
        return { ...item, age: event.target.value };
      }
      return item;
    });
    setData(newData);
  };

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>
              <input
                type="text"
                value={item.name}
                onChange={event => handleNameChange(item.id, event)}
              />
            </td>
            <td>
              <input
                type="number"
                value={item.age}
                onChange={event => handleAgeChange(item.id, event)}
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default EditableTable;