如何解决ReactJS-同位素布局-使用数据属性进行过滤/排序
我正在尝试简化React组件中的同位素处理程序-我想创建类似于catergory [Metal]或catergory [transition]的过滤器选项-以及类似于catergory [Metal,transition]的组合过滤器。 / p>
此沙箱。 https://codesandbox.io/s/brave-sea-tnih7
就像filterFns [filterValue,“ param2”]-如何将2个参数推入过滤器函数-而不是固定的GreaterThan50-“ greaterThan(50)”,“ greaterThan(5)-这种动态过滤处理程序类型“
最新的沙箱 https://codesandbox.io/s/brave-sea-tnih7?file=/src/IstotopeWrapper.js
import React,{ Component } from 'react';
import Isotope from 'isotope-layout';
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import GenericForm from '../GenericForm/GenericForm';
import './IsotopeHandler.scss';
class IsotopeHandler extends Component {
constructor() {
super();
this.myRef = React.createRef();
let items = [{
"name": "Mercury","category": "transition","weight": "122","symbol": "Hg","number": 12,"custom": "a","isgas": false
},{
"name": "Tellurium","category": "Metal","weight": "12","symbol": "Te","number": 232,"custom": "b",{
"name": "Bismuth","category": "rock","weight": "2200.59","symbol": "Bi","number": 1666,"custom": "c",{
"name": "Cadmium","weight": "1200","symbol": "Cd","number": 454,"custom": "d",{
"name": "Bosim","category": "gas","weight": "100","symbol": "Gs","custom": "e","isgas": true
},{
"name": "xosim","symbol": "xs","number": 44,"custom": "f","isgas": true
}]
this.state = { sortBy: 'original-order',items: items };
this.onFilterHandler = this.onFilterHandler.bind(this);
this.onSortHandler = this.onSortHandler.bind(this);
}
onSortHandler(sortValue){
if(sortValue){
console.log("sortValue",sortValue);
let bool = this.state.bool;
let options = { sortBy: sortValue };
options = Object.assign(options,{
sortAscending: (bool = !bool),});
this.setState({ bool: bool });
this.setState({ sortBy: sortValue });
this.state.iso.arrange(options);
}
}
onFilterHandler(filterName,filterField,filterValue){
var filterFns = {
//match
matches: function(itemElem) {
var values = itemElem.getAttribute('data-'+filterField);
return values.match(filterValue);
},//greaterThan
greaterThan: function(itemElem) {
var number = itemElem.getAttribute('data-'+filterField);
return parseInt(number,10) > filterValue;
},//lessthan
lessthan: function(itemElem) {
var number = itemElem.getAttribute('data-'+filterField);
return parseInt(number,10) < filterValue;
},//Between
between: function(itemElem) {
var number = itemElem.getAttribute('data-'+filterField);
return parseInt(number,10) > parseInt(filterValue.split(",")[0],10) && parseInt(number,10) < parseInt(filterValue.split(",")[1],10);
},};
// use matching filter function
let val = filterFns[filterName] || filterValue;
this.state.iso.arrange({ filter: val });
}
submitFilterFormHandler(data){
console.log("data Now with parent",data);
if(data){
//open dialog Box
//console.log("this",this);
}
}
componentDidMount(){
// init Isotope
var iso = new Isotope(this.myRef.current,{
itemSelector: '.grid-item',layoutMode: 'fitRows',getSortData: this.getCustomSortAttributes(this.state.items[0])
});
this.setState({ iso: iso });
console.log("iso",iso);
}
getCustomSortAttributes(item){
let keys = Object.keys(item);
let dataObj = {};
for (let i = 0; i < keys.length; i++) {
var obj = {
[keys[i]]: '[data-'+keys[i]+']'
}
dataObj = {...obj,...dataObj}
}
return dataObj;
}
attributeGeneration(item){
let keys = Object.keys(item);
let dataObj = {};
for (let i = 0; i < keys.length; i++) {
var obj = {
["data-"+keys[i]]: item[keys[i]]
}
dataObj = {...obj,...dataObj}
}
return dataObj;
}
render() {
var sorts = [{
"label": "Original Order","value": "original-order"
},{
"label": "Name","value": "name"
},{
"label": "Symbol","value": "symbol"
},{
"label": "Number","value": "number"
},{
"label": "Weight","value": "weight"
},{
"label": "Category","value": "category"
},{
"label": "Custom","value": "custom"
}]
let filters = [{
"label": "show all","params": {
"filter": "showAll","field": "","value": "*"
}
},{
"label": "number > 50","params": {
"filter": "greaterThan","field": "number","value": 50
}
},{
"label": "number < 350","params": {
"filter": "lessthan","value": 350
}
},{
"label": "between- number < 350 && number < 600","params": {
"filter": "between","value": "350,600"
}
},{
"label": "Metal category","params": {
"filter": "matches","field": "category","value": "Metal"
}
},{
"label": "Metal transition","value": "transition"
}
},{
"label": "Metal gas and transition","value": "gas|transition"
}
},{
"label": "isGas","field": "isgas","value": true
}
}]
let initialFilterFormValues = {
"manual": "type to filter"
}
let fieldsFilterForm = [
{
"type": "text","label": "Manual Entry","name": ["manual"],"options": []
},{
"type": "buttons","label": "Sweets2","name": ["sweets2"],"options": [
{
"label": "Sherbert","value": "0"
},{
"label": "Peach Jam","value": "1"
},{
"label": "Almond Butter","value": "2"
}
],//"validate": ["required"],}
];
let buttonsFilterForm = [
/*{
"label": "Submit3","variant": "contained","color": "primary","type": "submit","disabled": ["submitting"],"onClick" : null
}*/
];
return (
<div
className={"isotope"}
>
<div className="button-group filters-button-group">
<ButtonGroup variant="outlined" color="primary" aria-label="outlined primary button group">
{
filters.map((item,j) => {
return(
<Button
key={j}
className="button"
onClick={() => this.onFilterHandler(item.params.filter,item.params.field,item.params.value)}
>
{item.label}
</Button>
)
})
}
{/*
<Button className="button" data-filter=".alkali,.alkaline-earth">alkali and alkaline-earth</Button>
<Button className="button" data-filter=":not(.transition)">not transition</Button>
<Button className="button" data-filter=".Metal:not(.transition)">Metal but not transition</Button>
*/}
</ButtonGroup>
</div>
<div className="button-group sort-by-button-group">
<ButtonGroup variant="outlined" color="primary" aria-label="outlined primary button group">
{
sorts.map((item,j) => {
return(
<Button
key={j}
className="button"
onClick={() => this.onSortHandler(item.value)}
>
{item.label}
</Button>
)
})
}
</ButtonGroup>
</div>
{/*
<GenericForm
initialValues={initialFilterFormValues}
fields={fieldsFilterForm}
buttons={buttonsFilterForm}
submitHandler={this.submitFilterFormHandler}
/>
*/}
<div
className="grid"
ref={this.myRef}
>
{
this.state.items.map((item,j) => {
return(
<div
key={j}
className="grid-item"
{...this.attributeGeneration(item)}
>
<h3>{item.name}</h3>
<p>{item.weight}</p>
<p>{item.number}</p>
<p>{item.symbol}</p>
<p>{item.category}</p>
</div>
)
})
}
</div>
</div>
);
}
}
export default IsotopeHandler;
解决方法
在您的应用程序中,您可以将过滤器存储在阵列中,并将过滤器阵列更新为新过滤器(单过滤器模式),也可以将新选择的过滤器推入现有过滤器列表的顶部。
在此处查看更新的codesandbox。
首先,我们要在同位素中注册过滤方法:
componentDidMount() {
// init Isotope
var iso = new Isotope(this.myRef.current,{
itemSelector: ".grid-item",layoutMode: "fitRows",getSortData: this.getCustomSortAttributes(this.state.items[0]),filter: this.filterData // <- custom filter method
});
this.setState({ iso: iso });
console.log("iso",iso);
}
更新了onFilterHandler
,它需要3个参数
- addFilter:布尔值标志,指示是应添加新的过滤条件还是应删除现有的过滤条件
- filterCondition:字符串条件或条件数组,格式为
rule|field|value
- type:将
AND
或OR
终止的字符串值,以确定类型中的所有条件都应匹配还是任何单个条件都应匹配
基于areguments函数,要么添加新过滤器,要么搜索现有过滤器,然后将其从全局filters
数组中删除。
getFilterObject(condition) {
const conditionItems = condition.split("|");
const filterName = conditionItems[0];
const filterField = conditionItems[1];
const filterValue = conditionItems[2];
return {
condition: condition,name: filterName,field: filterField,value: filterValue,filterFunc: this.filterFns[filterName]
};
}
onFilterHandler(addFilter,filterCondition,type = "AND") {
// use matching filter function
// let val = filterFns[filterName] || filterValue;
const filterObj = {
type: type,filters: Array.isArray(filterCondition)
? filterCondition.map((cnd) => this.getFilterObject(cnd))
: [this.getFilterObject(filterCondition)]
};
const existingFilters = this.filters.filter(
(f) =>
f.filters.length === filterObj.filters.length &&
f.filters.every((f) =>
filterObj.filters.some(
(fObjFilter) => fObjFilter.condition === f.condition
)
)
);
if (addFilter && existingFilters.length === 0) {
this.filters = [...this.filters,filterObj];
} else if (!addFilter) {
this.filters = this.filters.filter((f) => !existingFilters.includes(f));
}
this.state.iso.arrange();
}
新添加的filterData
函数将负责根据当前过滤器列表过滤数据:
filterData(item) {
if (this.filters.length <= 0) {
return true;
}
const filterPredicate = (filterObj) => {
return typeof filterObj.filterFunc === "function"
? filterObj.filterFunc(item,filterObj.field,filterObj.value)
: filterObj.value === "*"
? true
: item.classList.contains(filterObj.value);
};
for (let idx = 0; idx < this.filters.length; idx++) {
const filterObj = this.filters[idx];
const retVal =
filterObj.type === "OR"
? filterObj.filters.some((fObjFilter) => filterPredicate(fObjFilter))
: filterObj.filters.every((fObjFilter) =>
filterPredicate(fObjFilter)
);
if (retVal) {
return retVal;
}
}
return false;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。