如何显示我的 json 文件中与我的过滤器匹配的数据

IT技术 javascript reactjs react-hooks tailwind-css react-props
2022-07-16 01:37:45

我正在 React 中创建一个多步骤表单，我想要一个页面 (Filters.jsx) 在我的表单中，它返回与我的过滤器（牛肉、鸡肉、蔬菜）匹配的所有菜单名称（包含在 data.json 中），但我不知道该怎么做。

import React from "react";
export default function Filter() {
  return (
    <div className="flex flex-col">
      <div className=" w-full mx-2 flex-1">
        <div className="font-bold h-6 mt-3 text-gray-600  leading-8 uppercase ">
          {" "}
          Norms
        </div>

        <tbody className="bg-white my-2 p-1 flex borer border-gray-200 rounded text-gray-500">
          <tr>
            <td className="font-bold h-8 mt-5 leading-8 uppercase ">
              <td>
                <input type="checkbox" value="beaf" className="w-8 h-3" /> beaf
              </td>
              <td>
                <input type="checkbox" value="chicken" className="w-8 h-3" />
                chicken
              </td>
              <td>
                <input type="checkbox" value="vegetables" className="w-8 h-3" />
                vegetables
              </td>
            </td>
          </tr>
        </tbody>
      </div>
    </div>
  );
}

这是我的沙盒的链接（浏览 /menu/form 以查看表单）：https://codesandbox.io/s/unruffled-river-ktoic8?

我尝试了什么：

export default function Filters() {

    //Filters events
    const ref = [
        { name: "beaf" },
        { name: "chicken" },
        { name: "vegetables" }
    ]

    const [norms, setNorms] = useState([]);
    useEffect(() => {
        setNorms(ref);
    }, []);


    const handleChange = (e) => {
        const { name, checked } = e.target;
        let tempR = norms.map((r) =>
            r.name === name ? { ...r, isChecked: checked } : r
        );
        setNorms(tempR);
    }


    return (
        <div>
            <form className="form w-100">
                {
                    norms.map((e, index) => (
                        <div className="form-check" key={index}>
                            <input
                                type="checkbox"
                                className="form-check-input"
                                name={e.name}
                                checked={e?.isChecked || false}
                                onChange={handleChange}
                            />
                            <label className="form-check-label ms-2">{e.name}</label>
                        </div>
                    ))
                }
            </form >
        </div>
    )
1个回答

我建议使用对象或 Map 来保存过滤器值，其中过滤器名称是键，选中的值是值。

const [filters, setFilters] = React.useState({});

创建一个处理程序，按名称设置特定输入的检查值。

const changeHandler = (e) => {
  const { name, checked } = e.target;
  setFilters((filters) => ({
    ...filters,
    [name]: checked
  }));
};

渲染输入并checked从状态设置props。

{["beef", "chicken", "vegetables"].map((name) => (
  <td key={name}>
    <label>
      <input
        type="checkbox"
        checked={filters[name]}
        onChange={changeHandler}
        name={name}
        className="w-8 h-3"
      />
      {name}
    </label>
  </td>
))}

然后过滤/映射数据，全部内联。

import data from "../../data.json";

...

{data
  .filter((item) => {
    // get array of enabled filter keys
    const filterEntries = Object.entries(filters)
      .filter(([, value]) => Boolean(value))
      .map(([key]) => key);

    // some filter enabled
    if (filterEntries.length) {
      // check proteins
      if (filters.beef || filters.chicken) {
        return item.dishes.some((dish) =>
          filterEntries.includes(dish.meat)
        );
      }

      // check vegetables
      if (filters.vegetables) {
        return item.dishes.some((dish) => !!dish.vegetables);
      }
    }

    // no filter enabled, return all elements
    return true;
  })
  .map((item) => (
    <tr key={item.id}>
      .... map data item properties here ...
    </tr>
  ))}

编辑神火735rty

其它你可能感兴趣的问题
上一篇在 TypeScript 中导入音频文件 下一篇React Router 无法识别 laravel 中的直接地址行更改