如何使用reactjs在表格中添加复选框

npm install react

yarn add react

import React, { useState } from 'react';

const TableWithCheckbox = () => {
  const [checkedItems, setCheckedItems] = useState({});

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

  return (
    <table>
      <thead>
        <tr>
          <th>选择</th>
          <th>标题</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input
              type="checkbox"
              checked={checkedItems['item1']}
              onChange={event => handleCheckboxChange(event, 'item1')}
            />
          </td>
          <td>项目1</td>
          <td>这是项目1的描述</td>
        </tr>
        <tr>
          <td>
            <input
              type="checkbox"
              checked={checkedItems['item2']}
              onChange={event => handleCheckboxChange(event, 'item2')}
            />
          </td>
          <td>项目2</td>
          <td>这是项目2的描述</td>
        </tr>
        {/* 可以继续添加更多的表格行 */}
      </tbody>
    </table>
  );
};

export default TableWithCheckbox;

import React from 'react';
import TableWithCheckbox from './TableWithCheckbox';

const App = () => {
  return (
    <div>
      <h1>带复选框的表格</h1>
      <TableWithCheckbox />
    </div>
  );
};

export default App;