javascript - 如何将参数传递给过滤器方法并使用不同的参数在 React onClick 事件中调用该函数？

Question

我创建了一个 filter() 方法，如果满足特定条件，该方法将返回一个新数组。

过滤数组的函数:

filterTableData = () => {
   const userPackages: any = this.props.lenders.packages;

   const userPackageFiltered = userPackages.filter((userPackage) => {
       return userPackage.businessStatus.toLowerCase() === this.state.btnValue;
   });
   console.log(userPackageFiltered);
}

然后，我使用 onClick React 事件处理程序 来触发函数像这样:

<button 
    value={this.state.btnValue} 
    onClick={this.filterTableData}
>
    Invited
</button>

完美运行!

现在，我想重用此逻辑并将其附加到不同的按钮。因此，我尝试将 参数 传递给我的 filterTableData() 函数，如下所示:

filterTableData = (parameters) => {
   const userPackages = this.props.lenders.packages;

   const userPackageFiltered = userPackages.filter((parameters) => {
       return parameters.toLowerCase() === this.state.btnValue;
   });
   console.log(userPackageFiltered);
}

然后，我尝试这样调用它:

<button 
    value={this.state.btnValue} 
    onClick={this.filterTableData(userPackage.businessStatus)}
    >
     Invited
</button>

<button 
    value={this.state.btnValue2} 
    onClick={this.filterTableData(userPackage.type)}
    >
     Draft
</button>

显然，这不起作用。

这是一个 sample code 。我想将过滤器值传递到参数中，以便在其他按钮中重用此代码并使用不同的条件过滤数组。

行为类似于此 code sample ，请确保选中“查看列”图标和复选框的行为。

Answer 1

如果目标是根据数据中特定字段的真实性进行过滤，该字段的名称在组件中保存为 this.state.buttonValue，那么您可以通过以下方式实现所需的效果像这样编写过滤器方法:

filterTableData(param) {
    const filteredData = this.state.data.filter(user => user[param]);
    // code to use filterdData, presumably using this.setState somewhere
}

然后定义您的 onClick 属性，如下所示:

onClick={() => this.filterTableData(this.state.buttonValue)}

您可能不仅仅想使用值的真实性/虚假性(如果实际未提供它们，它们可能只会是虚假的) - 您可能需要一个“年龄”过滤器来仅选择用户例如，18 岁以上。目前尚不清楚您的确切需求是什么 - 但上面的代码应该作为一个很好的轮廓，唯一的变化将在 filterTableData 中，您可能需要在其中使用 switch param 参数并为每个参数定义一个自定义过滤器函数，然后将其传递给 this.state.data.filter。希望您能从中找出适合您情况的具体操作。