如何在 React 中构建高级过滤器组件?
How to build a advanced filter component in react?
尽管进行了很多研究,但我似乎并没有完全找到我正在寻找的东西。我正在构建一个房地产反应应用程序,在搜索页面中,我希望能够根据价格范围、卧室数量、浴室数量、房屋类型来过滤结果。我看了一些教程,但我不太确定他们是否指出了正确的方向。我想使用功能组件、反应钩子、没有 redux 或 MobX 也没有 css 框架。是否有必要使用 </form>
标签?我们如何在数组上动态应用多个过滤器?因为过滤器将处理从存储在数组中的 api 下载的本地数据。我想要尽可能多的解释。这是一个例子:
您正在从 API 获取数据并将其提供给您的组件。现在,这个过滤器组件有一个数据的本地副本,将用于过滤。我无法评论您将如何在组件中创建过滤器(从 UI 的角度来看)。我可以建议使用 lodash 库一次对一组对象应用各种过滤器。我能想到的例子之一是 -
var location = 'Miami, FL'
var priceFrom = 00;
var priceTo = 00;
var filterFunctions = _.overEvery([locationFilter, priceFilter]);
locationFilter(data) {
return data.filter(o => o.location === location);
}
priceFilter(data) {
return data.filter(o => o.price >= priceFrom && o.price <= priceTo);
}
var result = yourData.filter(filterFunctions);
要检查用户select编辑了哪些过滤器的状态,您需要在组件的本地状态中维护它。我猜,将其声明为对象数组的最佳方式。当用户 changed/selected 时推送过滤器和它的值。如果用户 un-select 返回,则将其从数组中删除。例如,如果用户 selects something from location drop down,将值推送到数组中,如果不存在的话。否则根据名称更新值。该数组应该如下所示(假设反应组件):
this.state.filters = [{name: 'price', value: 2000},
{name: 'location', value: 'Miami, FL'}];
现在使用此数组来决定要应用的过滤函数:
locationFilter(location) {
return this.state.yourData.filter(o => o.location === location);
}
var result;
filters.map(f => {
switch(f.name) {
case 'location':
result = locationFilter(f.value);
break;
case 'price':
result = priceFilter(f.value);
break;
}
// result contains filtered result
});
尽管进行了很多研究,但我似乎并没有完全找到我正在寻找的东西。我正在构建一个房地产反应应用程序,在搜索页面中,我希望能够根据价格范围、卧室数量、浴室数量、房屋类型来过滤结果。我看了一些教程,但我不太确定他们是否指出了正确的方向。我想使用功能组件、反应钩子、没有 redux 或 MobX 也没有 css 框架。是否有必要使用 </form>
标签?我们如何在数组上动态应用多个过滤器?因为过滤器将处理从存储在数组中的 api 下载的本地数据。我想要尽可能多的解释。这是一个例子:
您正在从 API 获取数据并将其提供给您的组件。现在,这个过滤器组件有一个数据的本地副本,将用于过滤。我无法评论您将如何在组件中创建过滤器(从 UI 的角度来看)。我可以建议使用 lodash 库一次对一组对象应用各种过滤器。我能想到的例子之一是 -
var location = 'Miami, FL'
var priceFrom = 00;
var priceTo = 00;
var filterFunctions = _.overEvery([locationFilter, priceFilter]);
locationFilter(data) {
return data.filter(o => o.location === location);
}
priceFilter(data) {
return data.filter(o => o.price >= priceFrom && o.price <= priceTo);
}
var result = yourData.filter(filterFunctions);
要检查用户select编辑了哪些过滤器的状态,您需要在组件的本地状态中维护它。我猜,将其声明为对象数组的最佳方式。当用户 changed/selected 时推送过滤器和它的值。如果用户 un-select 返回,则将其从数组中删除。例如,如果用户 selects something from location drop down,将值推送到数组中,如果不存在的话。否则根据名称更新值。该数组应该如下所示(假设反应组件):
this.state.filters = [{name: 'price', value: 2000},
{name: 'location', value: 'Miami, FL'}];
现在使用此数组来决定要应用的过滤函数:
locationFilter(location) {
return this.state.yourData.filter(o => o.location === location);
}
var result;
filters.map(f => {
switch(f.name) {
case 'location':
result = locationFilter(f.value);
break;
case 'price':
result = priceFilter(f.value);
break;
}
// result contains filtered result
});