Угловая альтернатива фильтра JS ng-repeat в React JS

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 не существует готового решения.

Но вы можете создать собственное окно поиска. См. Следующий пример.

Отрывок хорошо рассмотрен с комментариями. Это должно помочь вам.

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>

Answer 2

Я задавал себе это так много раз в процессе перехода от нг реагировать, и это решение (которое использует 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 in, , тогда вы можете фильтровать массивы объектов любой ценой или ключом: пара значений.

Пожалуйста, дайте мне знать, если вы работаете как рабочий пример (термин, ключ и arr устанавливают значения состояния и т. Д. И т. Д. И т. Д.).