尝试使用react中的onclick事件更改表中项目的值

import React, { useState } from 'react';

const Table = () => {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', value: 'Value 1' },
    { id: 2, name: 'Item 2', value: 'Value 2' },
    { id: 3, name: 'Item 3', value: 'Value 3' }
  ]);

  const handleClick = (id) => {
    // 根据id找到需要更改的项目
    const updatedItems = items.map(item => {
      if (item.id === id) {
        // 修改项目的值
        return { ...item, value: 'New Value' };
      }
      return item;
    });

    // 更新状态
    setItems(updatedItems);
  };

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Value</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {items.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.value}</td>
            <td>
              <button onClick={() => handleClick(item.id)}>Change Value</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;