如何使用復選框使用反應顯示隱藏 html 表行

Question

我有一些來自后端的數據，我通過這些數據渲染我的表格以及我的復選框，因為它們是動態的。

我要做的是最初顯示頁面加載完整數據時，但是當我選中一個復選框時，我只想顯示相應的行，如果我取消選中所有未選中框的所有數據，則應顯示所有數據，我正在使用對做這個

我有多個復選框

這是我的數據

 const data = [
{
  ol_name: "delhi",
  ol_id: "123",
  ol_Amt: "2250",
  ol_Date: "12-04-2019",
  category: "A1"
},
{
  ol_name: "jaipur",
  ol_id: "1235",
  ol_Amt: "1520",
  ol_Date: "12-5-2018",
  category: "A2"
},
{
  ol_name: "kolkata",
  ol_id: "1234",
  ol_Amt: "1126",
  ol_Date: "14-02-2019",
  category: "A1"
},
{
  ol_name: "delhi",
  ol_id: "1263",
  ol_Amt: "5523",
  ol_Date: "03-03-2019",
  category: "A2"
}

];

通過這個我正在制作我的表格和復選框，我想通過這兩個過濾我的表格。

我有很多谷歌，並使用j query找到了這個解決方案，因為我是新手，沒有辦法做到這一點

請檢查工作代碼沙箱

Answer 1

如果您想從 api 動態獲取數據和過濾器，請參閱答案末尾的完整動態部分，有一個動態創建所有內容的實現。

Static 版本：創建名稱和類別如下

let id = 0;
const unique = prop => {
    const res = [];
    data.forEach(v => {
      if (res.findIndex(i => i[prop] === v[prop]) === -1)
        res.push({ ol_id: id++, [prop]: v[prop] });
    });
    return res;
};
const checkBoxol_name = unique("ol_name");
const checkBoxol_category = unique("category");

然后寫一個過濾器

const [filters, setFilters] = useState({
    category: [],
    ol_name: []
  });
  const filterData = () => {
    let result = data;
    Object.keys(filters).forEach(key => {
      if (filters[key].length !== 0)
        result = result.filter(item => filters[key].indexOf(item[key]) !== -1);
    });
    return result;
  };

你的 tableBody 應該是這樣的

<tbody>
    {filterData().map(item => (
         <tr>
           <td>{item.ol_name}</td>
           <td>{item.ol_id}</td>
           <td>{item.ol_Amt}</td>
           <td>{item.ol_Date}</td>
           <td>{item.category}</td>
         </tr>
       ))
    }
</tbody>

更改您的類別復選框如下

<input
       type="checkbox"
       className="custom-control-input"
       id={li.ol_id}
       name={li.category}
       filter="category"
       onChange={handleChange}
       />

更改您的姓名復選框如下

 <input
       type="checkbox"
       className="custom-control-input"
       id={li.ol_id}
       name={li.ol_name}
       filter="ol_name"
       onChange={handleChange}
       />

然后添加handleChange方法

const handleChange = e => {
    let name = e.target.name;
    let filter = e.target.getAttribute("filter");
    let checked = e.target.checked;
    if (checked) {
      let newFilter = [...filters[filter]];
      newFilter.push(name);
      setFilters({ ...filters, [filter]: newFilter });
    } else {
      setFilters({
        ...filters,
        [filter]: filters[filter].filter(item => item !== name)
      });
    }
  };

鏈接到沙箱 ( https://codesandbox.io/s/thirsty-edison-is6zy?file=/src/App.js:987-1269 )。

完整動態版本：對於完整動態版本，請執行以下操作

const data = [....]; // Read from API
const filterBy = [...]; // Read from API

  let id = 0;
  const unique = prop => {
    const res = [];
    data.forEach(v => {
      if (res.findIndex(i => i[prop] === v[prop]) === -1)
        res.push({ ol_id: id++, [prop]: v[prop] });
    });
    return res;
  };

  const filterGroups = {};
  let init = {};
  filterBy.forEach(item => {
    init[item] = [];
    filterGroups[item] = unique(item);
  });

  const [filters, setFilters] = useState(init);

  const filterData = () => {
    let result = data;
    Object.keys(filters).forEach(key => {
      if (filters[key].length !== 0)
        result = result.filter(item => filters[key].indexOf(item[key]) !== -1);
    });
    return result;
  };

  const handleChange = e => {
    let name = e.target.name;
    let filter = e.target.getAttribute("filter");
    let checked = e.target.checked;
    if (checked) {
      let newFilter = [...filters[filter]];
      newFilter.push(name);
      setFilters({ ...filters, [filter]: newFilter });
    } else {
      setFilters({
        ...filters,
        [filter]: filters[filter].filter(item => item !== name)
      });
    }
  };

  return (
    <div className="App">
      {filterBy.map(item => (
        <div className="container-fluid">
          <hr />
          <h5>filter with {item}</h5>
          {filterGroups[item].map(li => (
            <div key={li.ol_id} className="custom-control custom-checkbox">
              <div className="form-group each_form_group">
                <input
                  type="checkbox"
                  className="custom-control-input"
                  id={li.ol_id}
                  filter={item}
                  name={li[item]}
                  onChange={handleChange}
                />
                <label className="custom-control-label" htmlFor={li.ol_id}>
                  {li[item]}
                </label>
              </div>
            </div>
          ))}
        </div>
      ))}
      <div className="table-responsive">
        <table className="table table-bordered">
          <thead className="table-secondary">
            <tr>
              <th>Ol name</th>
              <th>Ol Id</th>
              <th>Ol Amount</th>
              <th>Ol Date</th>
              <th>Ol category</th>
            </tr>
          </thead>
          <tbody>
            {filterData().map(item => (
              <tr>
                <td>{item.ol_name}</td>
                <td>{item.ol_id}</td>
                <td>{item.ol_Amt}</td>
                <td>{item.ol_Date}</td>
                <td>{item.category}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );

完整動態版鏈接： https://codesandbox.io/s/strange-kepler-w8lgl?file=/src/App.js

Answer 2

您需要為復選框使用受控組件，然后過濾要呈現的數據。

我的方法是使用包含過濾行的useState 掛鈎創建一個數組，並僅顯示符合條件的行。 如果未選擇過濾器，則顯示所有行。

更新代碼：

import React from "react";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
  const [filterRows, setFilterRows] = React.useState([]);
  const data = [
    {
      ol_name: "delhi",
      ol_id: "123",
      ol_Amt: "2250",
      ol_Date: "12-04-2019",
      category: "A1"
    },
    {
      ol_name: "jaipur",
      ol_id: "1235",
      ol_Amt: "1520",
      ol_Date: "12-5-2018",
      category: "A2"
    },
    {
      ol_name: "kolkata",
      ol_id: "1234",
      ol_Amt: "1126",
      ol_Date: "14-02-2019",
      category: "A1"
    },
    {
      ol_name: "delhi",
      ol_id: "1263",
      ol_Amt: "5523",
      ol_Date: "03-03-2019",
      category: "A2"
    }
  ];
  let i = 0;
  const checkBoxol_name = Array.from(new Set(data.map(s => s.ol_name))).map(
    test => {
      return {
        ol_name: test,
        ol_id: test + i
      };
    }
  );
  const checkBoxol_category = Array.from(
    new Set(data.map(s => s.category))
  ).map(test => {
    return {
      category: test,
      ol_id: test + i
    };
  });
  console.log(checkBoxol_name);

  const handleToggleFilter = event => {
    const id = event.target.name;
    if (filterRows.includes(id)) {
      return setFilterRows(filterRows.filter(_id => id !== _id));
    }
    return setFilterRows([...filterRows, id]);
  };

  console.log(filterRows);

  const hasRowBeenFiltered = (row) => {
    if(filterRows.length === 0) {
      return true;
    }

    return filterRows.includes(`${row.ol_name}${i}`) || filterRows.includes(`${row.category}${i}`)
  }

  return (
    <div className="App">
      <div className="container-fluid">
        <hr />
        <h5>filter with category</h5>
        {checkBoxol_category.map(li => (
          <div key={li.ol_id} className="custom-control custom-checkbox">
            <div className="form-group each_form_group">
              <input
                type="checkbox"
                className="custom-control-input"
                id={li.ol_id}
                name={li.ol_id}
                checked={filterRows.includes(li.ol_id)}
                onChange={handleToggleFilter}
              />
              <label className="custom-control-label" htmlFor={li.ol_id}>
                {li.category}
              </label>
            </div>
          </div>
        ))}
        <hr />
        <h5>filter with ol name</h5>
        {checkBoxol_name.map(li => (
          <div key={li.ol_id} className="custom-control custom-checkbox">
            <div className="form-group each_form_group">
              <input
                type="checkbox"
                className="custom-control-input"
                id={li.ol_id}
                name={li.ol_id}
                checked={filterRows.includes(li.ol_id)}
                onChange={handleToggleFilter}
              />
              <label className="custom-control-label" htmlFor={li.ol_id}>
                {li.ol_name}
              </label>
            </div>
          </div>
        ))}
      </div>
      <div className="table-responsive">
        <table className="table table-bordered">
          <thead className="table-secondary">
            <tr>
              <th>Ol name</th>
              <th>Ol Id</th>
              <th>Ol Amount</th>
              <th>Ol Date</th>
              <th>Ol category</th>
            </tr>
          </thead>
          <tbody>
            {data
              .filter(hasRowBeenFiltered)
              .map(item => (
                <tr>
                  <td>{item.ol_name}</td>
                  <td>{item.ol_id}</td>
                  <td>{item.ol_Amt}</td>
                  <td>{item.ol_Date}</td>
                  <td>{item.category}</td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default App;

https://codesandbox.io/s/loving-perlman-dshsr