Question

我有一个下拉菜单，我在其中运行onChange函数。在onChange之后，我正在过滤当前的React状态。这有效，并且我能够过滤唯一值。但是，切换到另一个下拉选择项后，我无法将更改后的状态重置为先前的原始状态。

handleStateOnChange = e => {
    let selectedWerkgever = e.target.value;

    const list = this.state.opleidingen.filter(({ opleiding_werkgever }) =>
        selectedWerkgever.includes(opleiding_werkgever)
    );

    this.setState({
        opleidingen: list,
        isResetButtonActive: true,
    });

    console.log('changed');
};

我正在过滤数组中包含“ opleiding_werkgever”的所有内容。但是，我如何首先恢复更改并再次重新过滤？

Answer 1

在相同组件或共享相同状态的组件上切换到另一个下拉列表不会自动重置状态。您对handleStateChange的首次调用会过滤状态，状态将一直保持下去，直到卸载该组件为止。您可以决定保留原始的opleidingen，然后在需要时使用它来重置opleidingen。

{
   opleidingen: list,
   isResetButtonActive: true,
   originalOpleidingen : list
}

Answer 2

我会在状态中存储selectedWerkgever并使用它来过滤您的下拉元素。保持原始列表不变。

因此简化您的handleStateOnChange：

handleStateOnChange = e => {
    this.setState({
      selectedWerkgever: e.target.value,
      isResetButtonActive: true
    });
};

并使用它来过滤您的下拉选项：

<select>
  {this.state.opleidingen.filter(({ opleiding_werkgever }) =>
    this.state.selectedWerkgever.includes(opleiding_werkgever)).map(item=>
        <Option value={item} />}>)
 }
 ...

React Select下拉式onChange过滤器并重置为先前/原始状态？

2 个答案: