我想为我的数据数组创建一个搜索过滤器。它具有多个对象和键，例如：
[ { "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" } ]
我想要搜索过滤器搜索此数组上的任何地方。例如：当我输入框时，我想搜索对象内部的任何地方。像fname，lname，email，gender
我该怎么做？请帮我
如果我只想限制姓和名的搜索，该怎么做？
您可以将值保持filter在组件状态，并使用该值查看它是否作为任何字符串包含在任何数组元素属性中。
filter
例
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>
