Question

我必须根据下拉选择来过滤值。所以基本上我有10张卡，分别显示红色，黄色，蓝色状态。我有一个下拉列表，可以帮助我根据颜色过滤这些卡片。假设，如果我在下拉菜单中选择了黄色，那么所有4张红色卡片都应该出现在我的屏幕上。我已经开始编写代码，但介于两者之间。如果有人可以帮助我，那就太好了。

class Drop extends Component<{}, IState> {
  state = {
    product: [],
  };
  sortOptions = [
    { value: "Red", label: "Red" },
    { value: "Yellow", label: "Yellow" },
    { value: "Blue", label: "Blue" },
  ];
  onChange = (event) => {
    console.log(event.value);
    let filtered = this.sortOptions.filter(
      (card) => card.value === event.value
    );
    console.log(filtered); // It is returning value wahtever is selected in dropdown
  };

  render() {
    return (
      <>
        <Dropdown
          items={this.sortOptions}
          onChange={this.OnChange}
          name="sorting"
          label="All"
          type="default"
        />

        <div>
          {this.state.product.map((product) => (
            <Card product={product}></Card>
          ))}
        </div>
      </>
    );
  }
}

在我的卡片组件内部：

<Card>
  <div> Content </div>
  {this.state.color} // this color will varies
</Card>

OnChange方法将返回下拉菜单的选定值，但我想根据下拉菜单值过滤这些卡

Answer 1

您只是将过滤器放在错误的位置。

首先，您要跟踪状态下的所选颜色：

interface A {
  x: number,
  y: string | undefined
}

现在允许您的更改处理程序更新该状态：

state = { products: [], color: 'Red' }

现在，您可以根据onChange = event => { this.setState({ color: event.value }) }中的选择进行过滤，例如：

render()

如何从函数返回过滤的组件

1 个答案: