如何将表行的值分配给React中的checkbox？

import React, { useState } from 'react';

function MyComponent() {
  const [checkedItems, setCheckedItems] = useState({});

  // 其他组件代码...

  return (
    // 渲染表格和checkbox
  );
}

export default MyComponent;

function MyComponent() {
  const [checkedItems, setCheckedItems] = useState({});

  const handleCheckboxChange = (event) => {
    const { name, checked } = event.target;
    setCheckedItems({ ...checkedItems, [name]: checked });
  };

  // 其他组件代码...

  return (
    <table>
      <thead>
        <tr>
          <th>表头</th>
          <th>表头</th>
          <th>表头</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.description}</td>
            <td>
              <input
                type="checkbox"
                name={item.id}
                checked={checkedItems[item.id] || false}
                onChange={handleCheckboxChange}
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function MyComponent() {
  // ...

  const handleSubmit = () => {
    const selectedItems = data.filter((item) => checkedItems[item.id]);
    // 使用选中的行的值进行后续操作
  };

  // ...

  return (
    // ...
    <button onClick={handleSubmit}>提交</button>
    // ...
  );
}