从下拉reactjs中过滤一个值

Question

我的屏幕上有多张卡片。每张卡片都将字符串显示为“Popular”/“Latest”/“Old”。我从后端获得卡上的这些值。我必须实现过滤选项，根据流行度、最旧等过滤这些卡片。到目前为止我已经这样做了，但不知道如何过滤这些卡片。

<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" },
  ];

OnChange 方法：

onChange = (event) => {
    let filtered = this.sortOptions.filter(
      (val) => val.value === ProductState.Old
    );
    console.log("filtered", filtered);
  };

控制台输出：Object { value: "Old", label: "Old" } 但我想根据下拉列表中选择的值过滤我的卡片。谁能帮我解决这个问题。

Answer 1

您只需将 onChange 函数更改为：

   onChange = (event) => {
    let filtered = this.cardArray.filter( // change cardArray according to your name
      (card) => card.tag === event.value // change tag according to your card code
    );
   setCardArray(filtered) // change setCardarray according to your setState function
  };

基本上，您使用下拉列表的选定值过滤您的卡片状态，并使用过滤后的数组更新卡片状态。

现在你在错误的数组上使用了过滤器函数。

Answer 2

我认为，您目前遇到了数据局部性问题。

首先确定需要过滤的数据来自哪里，存储在哪里。

onChange 方法仅对用户输入“做出反应”。例如，如果您打开下拉菜单并选择一个选项，则会触发 onChange 方法。您的 onChange 方法中的“事件”包含您刚刚单击的选项。

onChange = (事件) => {

};

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

onChange = (event) => {

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

现在您必须使用选定的“sortOption”来正确调用您从中获取卡片的后端，或者如果您的浏览器中已经有所有数据，请对这些数据应用过滤器方法。