Javascript 从下拉列表中筛选值

我的屏幕上有多张卡片。每张卡片将字符串显示为“流行”/“最新”/“旧””。我从后端获取卡上的这些值。我必须实现过滤选项，它根据受欢迎程度、最老的卡等过滤这些卡。到目前为止，我已经这样做了，但不确定如何过滤这些卡

<Dropdown
                          id="sorting"
                          items={this.sortOptions}
                          itemToString={(item) => (item ? item.label : "")}
                          onChange={this.onChange}
                          name="sorting"
                          label="All"
                          titleText="Sort"
                          type="default"
                        />
 sortOptions = [
    { value: "Popular", label: "Popular" },
    { value: "Old", label: "Old" },
    { value: "Latest", label: "Latest" },
  ];

控制台输出：

Object{value:“Old”，label:“Old”}

---

但是我想根据下拉列表中选择的值过滤我的卡。有谁能帮我解决这个问题。

我想，您目前有一个数据位置问题

首先，确保需要过滤的数据来自何处以及存储在何处

onChange方法仅对用户输入进行“反应”。例如，如果打开下拉列表并选择一个选项，将触发onChange方法。onChange方法中的“事件”包含您刚才单击的选项

onChange=（事件）=>{

})

将事件记录到控制台，并查看如何访问其中的数据

onChange = (event) => {

    console.log("dropDownOnChangeEvent", event);
  };

---

现在，您必须使用所选的“排序选项”来正确调用从中获取卡的后端，或者如果浏览器中已有所有数据，则对这些数据应用筛选方法。

您只需将onChange函数更改为：

onChange=（事件）=>{
让filtered=this.cardArray.filter（//根据您的姓名更改cardArray
（卡片）=>card.tag===event.value//根据您的卡片代码更改标签
);
setCardArray（已过滤）//根据setState函数更改setCardArray
};

基本上，您可以使用dropwdown的选定值过滤卡的状态，并使用过滤后的数组更新卡的状态

---

现在，您在错误的阵列上使用了筛选函数。

看起来您正在尝试筛选筛选选项本身。您所指的这些“卡片”是什么？在filter函数中，与事件值进行比较。@David cards，其中包含这些字符串值。假设我有10张牌，其中3张牌是“旧牌”，4张牌是“流行牌”，依此类推。所以，如果我从下拉列表中选择“流行”，那么我只想要4张卡片显示在屏幕上screen@Singh：这些“卡片”在您的组件中的什么位置？如果您还没有实现它们，那么这将是您尝试过滤它们之前的第一步。我已经创建了这些卡片，但没有在上面的问题中编写代码。我在控制台中得到了这个问题：Object{value:“Popular”，label:“Popular”}但确实不确定它将如何过滤包含“Popular”，“Old”，“Latest”的卡片以字符串形式包含这些值的卡片。假设我有10张牌，其中3张牌是“旧牌”，4张牌是“流行牌”，依此类推。因此，如果我从下拉列表中选择“流行”，那么我只希望屏幕上显示4张卡片如何应用过滤方法，这是我从一开始就提出的问题：DW设置ArrayCard是什么？我没有得到这个：根据你的setState函数更改setCardarray如果你使用钩子，这是你的cardArray的setState函数。如果您使用的是React.Components，请使用此.setState（{cardVariableHere:filtered}）更改它

onChange = (event) => {

    console.log("dropDownOnChangeEvent", event);
  };