javascript 如何创建用于搜索多个对象键值的 React 搜索过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51801907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create React search filter for search multiple object key values
提问by Gihan Rangana
I want to create a search filter for my data array.it has multiple objects and keys like this one,
我想为我的数据数组创建一个搜索过滤器。它有多个像这样的对象和键，
[
{
"fname": "Jayne",
"lname": "Washington",
"email": "[email protected]",
"gender": "female"
},
{
"fname": "Peterson",
"lname": "Dalton",
"email": "[email protected]",
"gender": "male"
},
{
"fname": "Velazquez",
"lname": "Calderon",
"email": "[email protected]",
"gender": "male"
},
{
"fname": "Norman",
"lname": "Reed",
"email": "[email protected]",
"gender": "male"
}
]
I want search filter search anywhere on this array. ex: when I type input box I want to search anywhere inside an object. like fname,lname,email,gender
我想搜索过滤器搜索这个数组上的任何地方。例如：当我输入输入框时，我想搜索对象内的任何地方。像 fname,lname,email,gender
how can i do it? please help me
我该怎么做？请帮我
If I want to restrict the search for only first and last names how to do that?
如果我想限制只搜索名字和姓氏怎么办？
回答by Tholle
You can keep a value filterin your component state and use that to see if it is contained as a substring in any of the array element properties.
您可以filter在组件状态中保留一个值，并使用它来查看它是否作为子字符串包含在任何数组元素属性中。
Example
例子
class App extends React.Component {
state = {
filter: "",
data: [
{
fname: "Jayne",
lname: "Washington",
email: "[email protected]",
gender: "female"
},
{
fname: "Peterson",
lname: "Dalton",
email: "[email protected]",
gender: "male"
},
{
fname: "Velazquez",
lname: "Calderon",
email: "[email protected]",
gender: "male"
},
{
fname: "Norman",
lname: "Reed",
email: "[email protected]",
gender: "male"
}
]
};
handleChange = event => {
this.setState({ filter: event.target.value });
};
render() {
const { filter, data } = this.state;
const lowercasedFilter = filter.toLowerCase();
const filteredData = data.filter(item => {
return Object.keys(item).some(key =>
item[key].toLowerCase().includes(lowercasedFilter)
);
});
return (
<div>
<input value={filter} onChange={this.handleChange} />
{filteredData.map(item => (
<div key={item.email}>
<div>
{item.fname} {item.lname} - {item.gender} - {item.email}
</div>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>