处理React复选框状态并切换React表的行颜色

import React, { Component } from 'react';

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rows: {
        row1: false,
        row2: false,
        row3: false
      }
    };
  }

  handleCheckboxChange = (rowId) => {
    this.setState(prevState => ({
      rows: {
        ...prevState.rows,
        [rowId]: !prevState.rows[rowId]
      }
    }));
  }

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>行</th>
            <th>颜色</th>
          </tr>
        </thead>
        <tbody>
          <tr className={this.state.rows.row1 ? 'selected' : ''}>
            <td>行1</td>
            <td>颜色1</td>
            <td>
              <input
                type="checkbox"
                checked={this.state.rows.row1}
                onChange={() => this.handleCheckboxChange('row1')}
              />
            </td>
          </tr>
          <tr className={this.state.rows.row2 ? 'selected' : ''}>
            <td>行2</td>
            <td>颜色2</td>
            <td>
              <input
                type="checkbox"
                checked={this.state.rows.row2}
                onChange={() => this.handleCheckboxChange('row2')}
              />
            </td>
          </tr>
          <tr className={this.state.rows.row3 ? 'selected' : ''}>
            <td>行3</td>
            <td>颜色3</td>
            <td>
              <input
                type="checkbox"
                checked={this.state.rows.row3}
                onChange={() => this.handleCheckboxChange('row3')}
              />
            </td>
          </tr>
        </tbody>
      </table>
    );
  }
}

export default Table;