映射两个数组并在 Javascript(React) 中进行比较

Question

i built a table and it has too long columns, and i was asked to create a checkbox group where a user can sort what columns he or she wanna see. He can uncheck any checkbox to hide the specific column and check to show.

Lets's say, this is my table column array:

const column = [
 {
  key: '123',
  title: 'column_a',
 },
 {
  key: '234',
  title: 'column_b',
 },
 {
  key: '345',
  title: 'column_c',
 },
 {
  key: '567',
  title: 'column_d',
 }
]

I created the checkbox group in the way that it returns an array when on change, like this:

const selectedOnes = ["column_b", "column_c"];

And i only want the column those match selectedOnes

Answer 1

To find the selected columns you can use this

const filteredColumns = (columns, selectedColumns)=>{
  return columns.filter(column => selectedColumns.includes(column.title))
}

Answer 2

Are you looking matched array like this

 const column = [ { key: '123', title: 'column_a', }, { key: '234', title: 'column_b', }, { key: '345', title: 'column_c', }, { key: '567', title: 'column_d', } ] const selectedOnes = ["column_b", "column_c"]; const result = column.filter(col => { return selectedOnes.find(selected=> selected === col.title) }) console.log(result);

Answer 3

I think you are trying to filter columns from the table dynamically.

The following code will help you.

import { useState } from "react";
import "./styles.css";

function removeValFromArray(array, item) {
  return array.filter((f) => f !== item);
}

export default function App() {
  const [selectedColumns, setSelctedColumns] = useState([]);

  function onHandler(col, checked) {
    if (checked) {
      if (!selectedColumns.includes(col)) {
        setSelctedColumns([...selectedColumns, col]);
      }
    } else {
      let temp = removeValFromArray(selectedColumns, col);
      setSelctedColumns(temp);
    }
  }

  return (
    <div className="App">
      <form>
        <label>One</label>
        <input
          type="checkbox"
          value="One"
          checked={selectedColumns.includes("One")}
          onChange={(e) => {
            onHandler(e.target.value, e.target.checked);
          }}
        />
        <label>Two</label>
        <input
          type="checkbox"
          value="Two"
          checked={selectedColumns.includes("Two")}
          onChange={(e) => {
            onHandler(e.target.value, e.target.checked);
          }}
        />
        <label>Three</label>
        <input
          type="checkbox"
          value="Three"
          checked={selectedColumns.includes("Three")}
          onChange={(e) => {
            onHandler(e.target.value, e.target.checked);
          }}
        />
      </form>
      <br />
      <h3>Selected Columns</h3>
      <ul>
        {selectedColumns.map((col) => {
          return <li>{col}</li>;
        })}
      </ul>
    </div>
  );
}

Demo - https://codesandbox.io/embed/nervous-wind-s0htq?fontsize=14&hidenavigation=1&theme=dark