我正在尝试一次过滤许多属性。现在,我只能过滤一个属性。例如,我想按类型,位置和体验进行过滤。假设我要type = PART_TIME location = bangalore and experience = less than 2
的视图会返回
{
id: 1,
type: "PART_TIME",
name: "Akash",
location: "bangalore",
experience: 1
},
这是下面的代码和沙箱https://codesandbox.io/s/heuristic-pine-zwt4o?file=/src/Search.js
import "./Search.css";
class Search extends React.Component {
constructor() {
super();
this.state = {
filterList: [
{
id: 11,
name: "Part Time",
value: "PART_TIME"
},
{
id: 12,
name: "Full Time",
value: "FULL_TIME"
},
{
id: 13,
name: "Freelancer",
value: "FREELANCER"
},
{
id: 14,
name: "mumbai",
value: "MUMBAI"
},
{
id: 15,
name: "feroz",
value: "FEROZ"
},
{
id: 16,
name: "experience",
value: "EXPERIENCE"
}
],
searchLists: [
{
id: 1,
type: "PART_TIME",
name: "Akash",
location: "bangalore",
experience: 1
},
{
id: 2,
type: "PART_TIME",
name: "feroz",
location: "mumbai",
experience: 3
},
{
id: 3,
type: "FULL_TIME",
name: "Farheen",
location: "agra",
experience: 5
},
{
id: 4,
type: "FREELANCER",
name: "Raju",
location: "chennai",
experience: 6
},
{
id: 5,
type: "FULL_TIME",
name: "Asif",
location: "vegas",
experience: 7
}
],
activeFilter: []
};
}
onFilterChange(filter) {
const { filterList, activeFilter } = this.state;
if (filter === "ALL") {
if (activeFilter.length === filterList.length) {
this.setState({ activeFilter: [] });
} else {
this.setState({
activeFilter: filterList.map((filter) => filter.value)
});
}
} else {
if (activeFilter.includes(filter)) {
const filterIndex = activeFilter.indexOf(filter);
const newFilter = [...activeFilter];
newFilter.splice(filterIndex, 1);
this.setState({ activeFilter: newFilter });
} else {
this.setState({ activeFilter: [...activeFilter, filter] });
}
}
}
render() {
const { filterList, activeFilter } = this.state;
let filteredList;
if (
activeFilter.length === 0 ||
activeFilter.length === filterList.length
) {
filteredList = this.state.searchLists;
} else {
filteredList = this.state.searchLists.filter((item) =>
this.state.activeFilter.includes(item.type)
);
}
return (
<div className="searchContainer">
<form>
<label htmlFor="myInput">All</label>
<input
id="myInput"
type="checkbox"
onClick={() => this.onFilterChange("ALL")}
checked={activeFilter.length === filterList.length}
/>
{this.state.filterList.map((filter) => (
<React.Fragment>
<label htmlFor={filter.id}>{filter.name}</label>
<input
id={filter.id}
type="checkbox"
checked={activeFilter.includes(filter.value)}
onClick={() => this.onFilterChange(filter.value)}
/>
</React.Fragment>
))}
</form>
<ul style={{ marginLeft: "70px" }}>
{filteredList.map((item) => (
<div key={item.id}>
<li>
{item.name} -- {item.type}
</li>
</div>
))}
</ul>
</div>
);
}
}
export default Search;
答案 0 :(得分:0)
一种动态方法是创建一个函数,该函数需要一个列表和一些用于过滤器的参数。下面的示例使用一个对象,您可以在其中指定属性值以获取过滤结果。
const searchLists=[{id:1,type:"PART_TIME",name:"Akash",location:"bangalore",experience:1},{id:2,type:"PART_TIME",name:"feroz",location:"mumbai",experience:3},{id:3,type:"FULL_TIME",name:"Farheen",location:"agra",experience:5},{id:4,type:"FREELANCER",name:"Raju",location:"chennai",experience:6},{id:5,type:"FULL_TIME",name:"Asif",location:"vegas",experience:7}];
const filterList = (list, filterArgs) =>
list.filter(item =>
Object.entries(filterArgs).every(([prop, value]) =>
typeof item[prop] === 'number' ?
item[prop] <= value :
item[prop] === value
)
);
const resultsFullTimeSixYearsExperience = filterList(searchLists, {
type: 'FULL_TIME',
experience: 6
});
const resultPartTimeMumbai = filterList(searchLists, {
type: 'PART_TIME',
location: 'mumbai'
});
console.log('Full time with 6 years or less experience', resultsFullTimeSixYearsExperience);
console.log('Part time in mumbai query', resultPartTimeMumbai);