React JS中的ng-repeat过滤器选项

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'))

<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>

在从ng转到react的过程中，我已经问过自己很多次了，这就是最终最适合我的解决方案(它使用lodash来解析键:值对):

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，然后，您可以根据您喜欢的任何值或键:值对过滤对象数组。

请让我知道，如果你想一个工作的例子(术语，键，和arr设置为状态值等，等，等)。