Блог

Я пытаюсь добавить a checkbox в пользовательскую таблицу с помощью этой select All функции.

Проблема:- Когда я нажимаю на select all флажок, он работает нормально, но если я нажимаю на любую строку checkbox , он перестает работать должным образом.

Код:- TableWrapper.Js

 import React, { useCallback, useEffect, useState, useRef } from "react";

import TableBody from "./TableBody";
import TableHead from "./TableHead";

const TableWrapper = ({headers, isCheckBox, tableData, checkedBoxSlectedData}) => {

  const columns = createHeaders(headers);

  const [ checkedData, setCheckedData ] = useState([])
  const [ selectAll, setSelectAll ] = useState('unchecked')
  const [ checkHeaderState, setCheckHeaderState ] = useState('unchecked')

  useEffect(() => {
    const visibleData = tableData.data.firstResponse.slice(0, numToDisplay);
    setVisibleData(visibleData);
  },[numToDisplay])

  useEffect(() => {
    getSelectState(checkedData.length, tableData.data.firstResponse.length); 
    checkedBoxSlectedData(checkedData)
  },[checkedData])
 
  const getSelectState = (checkDataLength, dataLength) => {
    switch (true) {
      case checkDataLength === dataLength:
          setCheckHeaderState('checked');
          break;
      case checkDataLength === 0:
          setCheckHeaderState('unchecked');
          break;
    }
  }

  const selectAllChecked = () => {
    {selectAll === 'checked' ? setSelectAll('unchecked'): setSelectAll('checked')}
  }

  const selectedCheckBox = (event, rowClicked) => {
    setCheckedData(
      prev => event
        ? [...prev, rowClicked]
        : prev.filter(val => val.id !== rowClicked.id)
    );
  }

  return (
    <>
    <div className="container">
    <div className="table-wrapper">
    <table>
      <TableHead 
        headers={columns}
        isCheckBox={isCheckBox}
        checkHeaderState={checkHeaderState}
        isSelectAll={selectAll} 
        selectAllChecked={selectAllChecked} 
      />
      <TableBody 
        headers={columns} 
        isCheckBox={isCheckBox} 
        isCheckBoxChecked={selectedCheckBox} 
        isSelectAll={selectAll} 
        tableData={visibleData}
      />
    </table>
    </div>
    </div>
    </>
  );
};

export default TableWrapper;
 

TableHead.js

 import React, { useEffect, useRef, useState } from "react";

const TableHead = ({ checkHeaderState, headers, isCheckBox, selectAllChecked }) => {

  const checkRef = useRef();

  useEffect(()=>{
    if(checkRef.current !== null amp;amp; checkRef.current !== undefined) {
       if(checkHeaderState === 'checked') {
        checkRef.current.checked = true;
        checkRef.current.indeterminate = false;
      } else if(checkHeaderState === 'unchecked') {
        checkRef.current.checked = false;
        checkRef.current.indeterminate = false;
      }
    }
  },[checkHeaderState])


  return (
    <thead>
        <tr>
          {
            isCheckBox amp;amp; 
              <th key={`table-header-checkBox`}><input id="select-all-checkBox" type="checkbox" onClick={selectAllChecked} ref={checkRef} /></th>
          }
        {headers.map((item, i) => {
          const { field, header, style} = item
          return (
            <th
              style={style}>
              {header}
            </th>
          )})}
        </tr>
    </thead>
  );
};

export default TableHead;
 

TableBody.js

 import React, { useEffect, useState } from "react";

import TableRow from "./TableRow";

const TableBody = ({ headers, isCheckBox, isSelectAll, isCheckBoxChecked, tableData }) => {

  const [columnHeaderKeys, setColumnHeaderKeys] = useState([]);

  useEffect(()=>{
    let keysArray = [];
    headers.map(({field}) => keysArray.push(field));
    keysArray.length !== 0 ? setColumnHeaderKeys(keysArray) : setColumnHeaderKeys([]);
  },[tableData])

  return (
    <tbody>
    {tableData.length !== 0 ?
      tableData.map((row, index)=>{
        return (<tr key={index}><TableRow key={index} isCheckBox={isCheckBox} data={row} keys={columnHeaderKeys} isSelectAll={isSelectAll} isCheckBoxChecked={isCheckBoxChecked} /></tr>)
      }) : <div>{"No Data is there"}</div>
    }
    </tbody>
  );
};

export default TableBody;
 

TableRow.js

 import React from "react";

const TableRow = ({ data, isCheckBox, isCheckBoxChecked, isSelectAll, keys }) => {
  
  return (
    <>
    {
        isCheckBox amp;amp; 
            <td><input 
                type="checkbox" 
                checked={isSelectAll === 'checked' ? 'checked' : null} 
                onChange={(event)=> isCheckBoxChecked(event.target.checked, data)}/>
            </td>
    }
    {keys.map((key)=>{
        return(
            <>
               <td key={data[key]}>{data[key]}</td>
            </>
        )
    })}
    </>
  );
};

export default TableRow;
 

Not sure where I am missing the catch, I tried few things in this. Still, I was not able to figure out the catch.

Please suggest me the way to do or any other better way to achieve the same feature.