mardi 25 mai 2021

React bind checkboxes with a single button

I'm trying to create a "Read button" for every checkbox that has been checked, this button simply has to change the color of the entire table row, but i'm unable to do it. These are my components:

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>
  };
};

As you can see my checkboxes are dinamically created with {eventData.map((data, key) => {

Thank you in advance to anyone that can help me with that, i searched for something similar but i didn't find anything.




Aucun commentaire:

Enregistrer un commentaire