时间戳

首页 > 解决方案 > 在 react js 中创建产品过滤器

reactjs - 在 react js 中创建产品过滤器

问题描述

我有这个分页页面我在下面给出了代码框链接

我正在尝试
根据 react js 中的给定下拉选择创建页面过滤器

这是我制作的沙箱代码

https://codesandbox.io/s/weathered-bird-7ppy7?file=/src/App.js

当我更改体验价格性别时，我想根据给定范围向人们展示

标签： reactjs

解决方案

设置经验上限和下限以及性别的状态。并根据性别和经验过滤数组。

我在sandbox中添加了工作示例。

过滤器已应用于渲染列表，因此渲染列表为空。玩弄过滤器。

//use a state to store the gender, upper Experience and Lower Experience
  const [gender, setGender] = useState();
  const [expUpper, setexpUpper] = useState();
  const [expLower, setexpLower] = useState();

//filter the array for gender and experience
  const filteredData = data.filter((d) => {
    return (
      (d.gender === gender &&
        d.experience >= expLower &&
        d.experience < expUpper) ||
      (d.gender === gender.toLowerCase() &&
        d.experience >= expLower &&
        d.experience < expUpper)
    );
  });

//handle the change in gender and experience
  const handleGenderSelect = (e) => {
    setGender(e.target.value);
  };

  const handleExperienceSelect = (e) => {
    switch (e.target.value) {
      case "0-5":
        setexpLower(0);
        setexpUpper(5);
        break;
      case "5-10":
        setexpLower(5);
        setexpUpper(10);
        break;
      case "10-15":
        setexpLower(10);
        setexpUpper(15);
        break;
      default:
        setexpLower(15);
        setexpUpper(100); //the maximum experience is set to 100 for 15+
    }
    console.log(e.target.value);
  };

/// handle select change
<select style={styles.sel} onChange={handleGenderSelect}>
  <option> Male</option>
  <option> Female</option>
</select>

推荐阅读