我创建了一个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 事件处理程序来触发function这样的：
<button
value={this.state.btnValue}
onClick={this.filterTableData}
>
Invited
</button>
它完美地工作！
现在，我想重用这个逻辑并将它附加到不同的按钮上。所以，我试图像这样传递parameters给我的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>
显然，这行不通。
这是一个示例代码。我想将过滤器值传递给 aparameter以在其他按钮中重用此代码并使用不同的条件过滤数组。
行为类似于此代码示例，请务必检查“查看列”图标和复选框的行为。
如果目的是根据数据中特定字段的真实性进行过滤，其名称在组件中保存为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参数上使用 a并为每个参数定义一个自定义过滤器函数，然后您将其传入到this.state.data.filter。希望你能从中找出你需要为你的情况做些什么。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句