我想为我的数据数组创建一个搜索过滤器。它有多个像这样的对象和键,
[
{
"fname": "Jayne",
"lname": "Washington",
"email": "jaynewashington@exposa.com",
"gender": "female"
},
{
"fname": "Peterson",
"lname": "Dalton",
"email": "petersondalton@exposa.com",
"gender": "male"
},
{
"fname": "Velazquez",
"lname": "Calderon",
"email": "velazquezcalderon@exposa.com",
"gender": "male"
},
{
"fname": "Norman",
"lname": "Reed",
"email": "normanreed@exposa.com",
"gender": "male"
}
]
我想要搜索过滤器搜索该数组上的任何位置。 例如:当我在输入框中键入内容时,我想搜索对象内的任何位置。如 fname、lname、电子邮件、性别
我该怎么做?请帮助我
如果我想限制仅搜索名字和姓氏,该怎么做?
最佳答案
您可以在组件状态中保留一个值filter
,并使用它来查看它是否作为子字符串包含在任何数组元素属性中。
示例
class App extends React.Component {
state = {
filter: "",
data: [
{
fname: "Jayne",
lname: "Washington",
email: "jaynewashington@exposa.com",
gender: "female"
},
{
fname: "Peterson",
lname: "Dalton",
email: "petersondalton@exposa.com",
gender: "male"
},
{
fname: "Velazquez",
lname: "Calderon",
email: "velazquezcalderon@exposa.com",
gender: "male"
},
{
fname: "Norman",
lname: "Reed",
email: "normanreed@exposa.com",
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>
关于javascript - 如何创建 React 搜索过滤器来搜索多个对象键值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51801907/