react filter search تحميل - react filter search تنزيل كود المصدر

react filter search

شفرة المصدر الأخرى

1.0.0

تنزيل

رد فعل تصفية البحث؟

هذا مكون React صغير وغير مزعج لتصفية بيانات التطبيق من جانب العميل.

تثبيت

npm i react-filter-search

yarn add react-filter-search

الاستخدام

React Filter Search هو ببساطة مكون يتطلب بيانات في حالة التطبيق (يجب أن يكون array من object وقيمة إدخال. وفي المقابل، ستعود...

البيانات التي تمت تصفيتها بناء على مدخلات المستخدم
جميع البيانات في غياب أي مدخلات البحث

تتدفق هذه البيانات احتياطيًا في شكل renderResults ، وهي خاصية عرض تُرجع واحدًا مما سبق. لذلك ستكون مسؤولاً عن إعداد تمرير البيانات وقيمة الإدخال.

بهذه الطريقة، ليس لدى React Filter Search رأي حول كيفية تخزين بياناتك وكيفية التعامل مع إدخال المستخدم في تطبيقك. ؟

 //
/*-Other Imports-*/
//
import FilterResults from 'react-filter-search' ;

class App extends Component {
  constructor ( props ) {
    super ( props ) ;
    this . state = {
      data : [ ] ,
      value : ''
    } ;
  }
  componentWillMount ( ) {
    fetch ( 'https://jsonplaceholder.typicode.com/users' )
      . then ( response => response . json ( ) )
      . then ( json => this . setState ( { data : json } ) ) ;
  }
  handleChange = event => {
    const { value } = event . target ;
    this . setState ( { value } ) ;
  } ;
  render ( ) {
    const { data , value } = this . state ;
    return (
      < div >
        < input type = "text" value = { value } onChange = { this . handleChange } / >
        < SearchResults
          value = { value }
          data = { data }
          renderResults = { results => (
            < div >
              { results . map ( el => (
                < div >
                  < span > { el . name } < / span >
                  < span > { el . email } < / span >
                < / div >
              ) ) }
            < / div >
          ) }
        / >
      < / div >
    ) ;
  }
}

يحدث السحر في renderResults ، الذي يُرجع مجموعة من الكائنات. إما أن بياناتك تمت تصفيتها بناءً على مدخلات المستخدم، أم لا.

سيتم تكرار منطق التصفية على أي مستوى من التداخل في بنية البيانات الخاصة بك. مما يعني أن الاقتراح الجيد لهذا هو شيء مثل بيانات المستخدم أو عناصر المهام غير المتداخلة بشكل كبير على العديد من المستويات.

إذا كنت ترغب في التصفية باستخدام سمات معينة فقط، فيمكنك استخدام خاصية pick الاختيارية.

 // if each object is of the form
var obj = { name : "Leanne Graham" , username : "Bret" , email : "[email protected]" , company : { "name" : "Romaguera-Crona" } }
< SearchResults
  . . .
  pick = { [ 'username' , 'company.name' ] }
  ...
/ >
// your objects will be filtered only with the name and company.name fields
// but you can still render other values like username and email

لعرض بياناتك، ما عليك سوى استخدام .map() لعرضها في طريقة العرض - حيث يتم الاحتفاظ بالبيانات في نفس البنية. قم بإرجاع بعض عناصر JSX المضمنة، أو قم بتغذية كل عنصر في مكون React عديم الحالة الذي يعرض بعض واجهة المستخدم.