在Angular JS中,我找到了ng-repeat的“过滤器”选项,它可以实时搜索。例如:
<div ng-repeat="std in stdData | filter:search">
<!--
Std Items go here.
-->
</div>
<input type="text" placeholder="Search std items" ng-model="search.$" />
以便我们在搜索框中输入的任何内容都会被过滤掉。我想知道React JS中有没有替代功能?
答案 0 :(得分:3)
React没有开箱即用的解决方案。
但是,您可以创建自己的搜索框。请参阅以下示例。
该评论很好地解决了该片段。这应该对你有帮助。
class Search extends React.Component{
constructor(props){
super(props)
this.state = {
items: ['car', 'mango', 'stackoverflow', 'computer'], //declare the items to be listed
searchTerm: null //initial search term will be null
}
this.onChange = this.onChange.bind(this)
}
onChange(e){
this.setState({
searchTerm: e.target.value //set the new serah term to the state
})
}
render(){
const items = this.state.items.map((item)=>{
if(!this.state.searchTerm) return <div>{item}</div> //return the items without filter when searchterm is empty
const regEx = new RegExp(this.state.searchTerm, 'g') //create regex based on search term to filter the items
return regEx.test(item) && <div>{item}</div> //if the item passes the regex text, return that item
})
return <div>
<input type="text" onChange={this.onChange} placeholder='search'/>
<div>
{items}
</div>
</div>
}
}
ReactDOM.render(<Search/>, document.getElementById('app'))
&#13;
<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="app"></div>
&#13;
答案 1 :(得分:0)
在从ng转变为反应的过程中,我已经多次问过这个问题,这就是解决方案(使用lodash解析密钥:值对),最终为我做了最好的工作:< / p>
import _ from 'lodash';
function escapeRegexCharacters(str) {
//make sure our term won't cause the regex to evaluate it partially
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
var filterHelper = {
filterObjectArrayByTerm: function(arr, term) {
//make sure the term doesn't make regex not do what we want
const escapedTerm = escapeRegexCharacters(term.trim());
//make the regex do what we want
const regEx = new RegExp (escapedTerm, 'ig');
//if the term is blank or has no value, return the object array unfiltered
if(escapedTerm === '' || escapedTerm === null || escapedTerm === undefined) {
return arr;
}
//iterate over each object in the array and create a map
return arr.map((obj) => {
//if any value in a key:value pair matches the term regex
if(Object.values(obj).filter((value) => regEx.test(value)).length > 0){
//return the object in the map
return obj;
} else {
//otherwise put the object in as null so it doesn't display
return null;
}
});
},
//most similar to ng-repeat:ng-filter in ng
filterObjectArrayByKeyThenTerm: function(arr, key, term) {
//make sure the terms don't make regex not do what we want
const escapedKey = escapeRegexCharacters(key.trim());
const escapedTerm = escapeRegexCharacters(term.trim());
//make the regex do what we want
const keyRegex = new RegExp (escapedKey, 'ig');
const termRegex = new RegExp (escapedTerm, 'ig');
//if the key or term value is blank or has no value, return array
if(escapedTerm === '' || escapedTerm === null || escapedTerm === undefined || escapedKey === '' || escapedKey === null || escapedKey === undefined) {
return arr;
}
//iterate over each object in the aray passed in and create a map
return arr.map((obj) => {
//mapped object hasn't matched the regex yet
let match = false;
//can't .map() over key:value pairs, so _.each
_.each(obj, (value, key) => {
//if the key and value match the regex
if(keyRegex.test(key) && termRegex.test(value)) {
//set match to true
match = true;
}
});
//if match was set to true
if(match){
//return the object in the map
console.log('success');
return obj;
} else {
//otherwise put the object in as null so it doesn't display
return null;
}
});
},
};
module.exports = filterHelper;
在您的应用程序结构中的某个地方有了该文件后,您可以通过调用
来使用这些功能中的任何一个import 'filterHelper' from '/path/to/filterHelper/filterhelper.js'
在你将使用的任何组件中使用ng-repeat:ng-filter in, 然后你可以通过你想要的任何值或键:值对来过滤对象数组。
如果你喜欢一个有效的例子(术语,密钥和arr设置为状态值等等),请告诉我。