首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何根据3个选择下拉列表的值过滤React状态?

在React中,可以通过使用状态(state)和事件处理函数来实现根据3个选择下拉列表的值进行过滤。下面是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';

const FilteredList = () => {
  const [list, setList] = useState([
    { name: 'Apple', category: 'Fruit', color: 'Red' },
    { name: 'Banana', category: 'Fruit', color: 'Yellow' },
    { name: 'Carrot', category: 'Vegetable', color: 'Orange' },
    { name: 'Broccoli', category: 'Vegetable', color: 'Green' },
  ]);

  const [selectedCategory, setSelectedCategory] = useState('');
  const [selectedColor, setSelectedColor] = useState('');

  const handleCategoryChange = (event) => {
    setSelectedCategory(event.target.value);
  };

  const handleColorChange = (event) => {
    setSelectedColor(event.target.value);
  };

  const filteredList = list.filter((item) => {
    if (selectedCategory && item.category !== selectedCategory) {
      return false;
    }
    if (selectedColor && item.color !== selectedColor) {
      return false;
    }
    return true;
  });

  return (
    <div>
      <label>
        Category:
        <select value={selectedCategory} onChange={handleCategoryChange}>
          <option value="">All</option>
          <option value="Fruit">Fruit</option>
          <option value="Vegetable">Vegetable</option>
        </select>
      </label>
      <br />
      <label>
        Color:
        <select value={selectedColor} onChange={handleColorChange}>
          <option value="">All</option>
          <option value="Red">Red</option>
          <option value="Yellow">Yellow</option>
          <option value="Orange">Orange</option>
          <option value="Green">Green</option>
        </select>
      </label>
      <br />
      <ul>
        {filteredList.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FilteredList;

在上述代码中,我们使用了useState来定义了三个状态:list表示原始列表数据,selectedCategory表示选中的类别,selectedColor表示选中的颜色。通过handleCategoryChangehandleColorChange事件处理函数,我们可以更新选中的类别和颜色。

filteredList中,我们使用filter方法根据选中的类别和颜色对原始列表进行过滤。如果选中的类别或颜色为空,则不进行过滤。

最后,我们在渲染部分使用两个<select>元素来展示下拉列表,并根据选中的值更新状态。根据过滤后的列表数据,我们使用map方法生成相应的列表项。

这个示例中没有涉及到具体的腾讯云产品,因此无法提供相关产品和链接。但是,腾讯云提供了丰富的云计算产品和服务,可以根据具体需求选择适合的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券