Question

在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中有没有替代功能？

Answer 1

React没有开箱即用的解决方案。

但是，您可以创建自己的搜索框。请参阅以下示例。

该评论很好地解决了该片段。这应该对你有帮助。

＆＃13;

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;

Answer 2

在从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设置为状态值等等），请告诉我。

React JS中的Angular JS ng-repeat过滤器替代方案

2 个答案: