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 Prop ได้

 // 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 ไร้สถานะที่เรนเดอร์ UI บางส่วน