使用单个按钮反应绑定复选框答案

【问题标题】：React bind checkboxes with a single button使用单个按钮反应绑定复选框
【发布时间】：2021-08-13 19:51:40
【问题描述】：

我正在尝试为已选中的每个复选框创建一个“读取按钮”，此按钮只需更改整个表格行的颜色，但我无法做到。这些是我的组件：

import "./App.css";
let eventData = require("./data.json");

export class Events extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        read: false
      };
      this.HandleReadBtn = this.HandleReadBtn.bind(this);
    }
    HandleReadBtn = () => {
      console.log(`clicked ` + this.state.read)
      this.setState(state => ({
        read: !state.read
      }));
    }
    render() {
      return <>
        <HomePageHeader Read={this.HandleReadBtn}/>
          <table>
            <TableHeader />
              <tbody>
                {eventData.map((data, key) => {
                return (
                      <TableBody key={key}
                      dispositivo={data.dispositivo}
                      IMEI={data.IMEI} 
                      evento={data.evento}
                      timestamp= {data.timestamp}/>
                    )
                })}
              </tbody>
          </table>
      </>
    };
};

//my header
class HomePageHeader extends React.Component {
  Read = () =>{
    this.props.Read()
  }
  render() {
    return <header className="header">
    <h2>Events</h2>
    <button onClick={this.Read}>Read</button>
    <button>Assign</button>
  </header>
  };
};

class TableBody extends React.Component {
  checked(event) {
    console.log(event.target.checked, event.target.name);
  }
  render () {
    return <tr>
    <td>
      <input type="checkbox" onChange={this.checked} defaultChecked={false}></input>
    </td>
    <td>
    {/* Owner*/}
    </td>
    <td>
      <h5>{this.props.dispositivo}</h5>
    </td>
    <td>
      <h5>{this.props.IMEI}</h5>
    </td>
    <td>
      <h5>{this.props.evento}</h5>
    </td>
    <td>
      <p>{this.props.timestamp}</p>
    </td>
  </tr>
  };
};

你可以看到我的复选框是用{eventData.map((data, key) => {动态创建的

提前感谢任何可以帮助我的人，我搜索了类似的东西，但没有找到任何东西。

【问题讨论】：

标签： javascript reactjs checkbox

【解决方案1】：

首先，您需要一个“checkedRow”CSS 类来应用您想要的样式。

您需要使用初始的“uncheckedRow”类映射行，然后为您的复选框提供一个 onclick 事件，以在两个选项之间切换行的 CSS 类名。

基本上，您将拥有两组 CSS 规则，您只需使用 JS 在它们之间来回切换。

【讨论】：