React JS - 基于多个复选框值的过滤答案

【问题标题】：React JS - filtering based on multiple checkbox valuesReact JS - 基于多个复选框值的过滤
【发布时间】：2022-01-31 13:27:16
【问题描述】：

我有一个简单的 react 应用程序，如下所示：

import { useState } from "react";

const initialState = [
  { id: 1, language: "javascript" },
  { id: 2, language: "java" },
  { id: 3, language: "python" },
  { id: 4, language: "python" },
  { id: 5, language: "javascript" },
  { id: 6, language: "javascript" },
];

function App() {
  const [items, setItems] = useState(initialState);

  const [languages, setLanguages] = useState({
    javascript: false,
    java: false,
    python: false,
  });

  const onChange = (e) => {
    setLanguages({ ...languages, [e.target.value]: e.target.checked });
  };

  return (
    <>
      <div>
        <label>
          <input
            type="checkbox"
            value="javascript"
            name="language"
            checked={languages.javascript}
            onChange={onChange}
          />
          javascript
        </label>

        <label>
          <input
            type="checkbox"
            value="java"
            name="language"
            checked={languages.java}
            onChange={onChange}
          />
          java
        </label>

        <label>
          <input
            type="checkbox"
            value="python"
            name="language"
            checked={languages.python}
            onChange={onChange}
          />
          python
        </label>
      </div>

      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.language}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

我现在正在尝试实现过滤，但尚未成功。如何根据所有选中的值对显示的items 进行过滤和渲染，以便每次复选框值更改时列表项都会更新？请参阅下面的预期行为。

示例 1

状态：

const [languages, setLanguages] = useState({
  javascript: true,
  java: false,
  python: false,
});

输出：

<ul>
  <li>javascript</li>
  <li>javascript</li>
  <li>javascript</li>
</ul>

示例 2

状态：

const [languages, setLanguages] = useState({
  javascript: true,
  java: false,
  python: true,
});

输出：

<ul>
  <li>javascript</li>
  <li>python</li>
  <li>python</li>
  <li>javascript</li>
  <li>javascript</li>
</ul>

【问题讨论】：

标签： javascript reactjs checkbox filter mapping

【解决方案1】：

您可以在渲染 ul 中的项目时简单地应用过滤器，如下所示

<ul>
    {items.filter(x => languages[x.language]).map((item) => (
      <li key={item.id}>{item.language}</li>
    ))}
</ul>

【讨论】：