React实现下拉框筛选卡片：如何根据选中值过滤对应状态卡片？

没问题，我来帮你搞定这个筛选功能！咱们一步步来实现：

首先，在你的类组件里新增一个状态，用来保存当前选中的筛选值，初始值设为空字符串对应默认显示全部卡片：

// 用构造函数的方式
constructor(props) {
  super(props);
  this.state = {
    selectedFilter: "",
    cards: [] // 这里存放从后端获取的所有卡片数据
  };
}

// 或者用class fields语法（如果你的项目支持）
state = {
  selectedFilter: "",
  cards: []
};

你的下拉框默认显示"All"，但当前sortOptions里没有这个选项，建议把它加进去，让用户可以明确选择显示全部卡片：

sortOptions = [
  { value: "", label: "All" }, // 新增「全部」选项，值为空字符串对应显示所有卡片
  { value: "Popular", label: "Popular" },
  { value: "Old", label: "Old" },
  { value: "Latest", label: "Latest" },
];

如果不想加这个选项，也可以在后续过滤逻辑里处理「未选中任何值时显示全部」的情况，但添加「全部」选项对用户体验更友好。

现在修改你的onChange方法，把用户选中的选项值存入状态中：

onChange = (selectedItem) => {
  // 将选中项的value存入state，若没有选中项则设为空字符串
  this.setState({
    selectedFilter: selectedItem ? selectedItem.value : ""
  });
};

接下来，在渲染前根据选中的筛选值过滤卡片数据，然后渲染过滤后的结果：

render() {
  const { selectedFilter, cards } = this.state;
  
  // 过滤卡片：如果选中了具体状态，只保留对应状态的卡片；否则返回全部卡片
  const filteredCards = selectedFilter 
    ? cards.filter(card => card.status === selectedFilter)
    : [...cards]; // 复制原数组，避免直接修改原始数据

  return (
    <div>
      {/* 你的下拉框组件 */}
      <Dropdown 
        id="sorting" 
        items={this.sortOptions} 
        itemToString={(item) => (item ? item.label : "")} 
        onChange={this.onChange} 
        name="sorting" 
        label="All" 
        titleText="Sort" 
        type="default" 
      />
      
      {/* 渲染过滤后的卡片列表 */}
      <div className="card-list">
        {filteredCards.map(card => (
          <div key={card.id} className="card-item">
            {/* 卡片内容，比如显示状态 */}
            <span className="card-status">{card.status}</span>
            {/* 其他卡片信息，比如标题、内容等 */}
          </div>
        ))}
      </div>
    </div>
  );
}

⚠️ 注意：这里假设你的卡片数据里有一个status字段，值和下拉框的value完全匹配（比如"Popular"/"Old"/"Latest"），如果你的字段名不同，记得改成你实际的字段名称。

如果你的卡片数据是从后端接口获取的，记得在组件挂载时请求数据并更新state：

componentDidMount() {
  // 模拟后端请求，替换成你实际的接口地址
  fetch('/api/get-cards')
    .then(res => res.json())
    .then(data => {
      this.setState({ cards: data });
    })
    .catch(err => console.error('获取卡片数据失败：', err));
}

这样修改后，当你选择下拉框里的选项时，页面就会自动过滤出对应状态的卡片啦！

内容的提问来源于stack exchange，提问作者Singh